vue-phone-preview
適用于pc端后臺管理系統(tǒng)手機預覽
A VueCli3.x+TypeScript Toolkit for Web.
Demo pictures

Install
$ npm i --save vue-phone-preview
or
$ yarn add vue-phone-preview
Quick Start
import Vue from 'vue'
import VuePhonePreview from 'vue-phone-preview';
Vue.use(VuePhonePreview)
@Component()
// or
import VuePhonePreview from 'vue-phone-preview'
@Component({
components: {
VuePhonePreview
}
})
/**
* 使用方法
* ①、如果使用第一種方法,從其他微信編輯器(135或者word文檔等等)
* 需要先把圖片上傳至第三方圖片服務器,然后獲取圖片鏈接復制到文檔里
* 例如:private content = '<img src="http://file.haoxinqing.cn/group1/M00/11/61/Chw4wFwAlz2AX_iqAABOSgaernE854.jpg" style=" max-width: 100%; height: auto;">'
* ②、就是iframe的形式,導入的是一個m端鏈接
*/
①、<vue-phone-preview :content="content"></vue-phone-preview>
②、<vue-phone-preview :url="`https://mp.haoxinqing.cn`"></vue-phone-preview>