Vue 常用插件

1、选择地区(省市区三级联动)：vue-area-linkage(推荐)、element-china-area-data

A、vue-area-linkage     

文档：https://www.npmjs.com/package/vue-area-linkage

npm i vue-area-linkage area-data -S

 

 

main.js 配置

import VueAreaLinkage from 'vue-area-linkage'		
import 'vue-area-linkage/dist/index.css'
Vue.use(VueAreaLinkage)		

 页面  

 

<el-form-item label="注册地区" prop="region" :rules="rule('请输入注册地区')">
    <area-cascader :level="1" type="text" placeholder="请选择地区" v-model='authentic.region' :data="pcaa" class="region"></area-cascader>
</el-form-item>

返回值： ["天津市", "市辖区", "河西区"] 

import { pca, pcaa } from 'area-data'
export default {
    data (){
        return {
             pca: pca,
             pcaa: pcaa            
        }
    }
}

配置好需加上这些样式，Sass、stylus 内无效

<style>
    .region .area-select {
        height: 40px;
        line-height: 25px
    }
</style>

*像下面这样，表格多条数据，点击详情弹窗，切换另一条后，存在显示地区不刷新的情况，用 $set 也无效，可用 v-if 处理

B、element-china-area-data  （IE8、9、10不兼容）

文档：https://www.npmjs.com/package/element-china-area-data

npm i element-china-area-data -S

引用 

import { regionData } from 'element-china-area-data'

 <el-cascader  size="large"  :options="options"  v-model="identity.region"  @change="handleChange"></el-cascader>

 

2、 富文本框：mavon-editor

文档：https://github.com/hinesboy/mavonEditor

安装

npm i mavon-editor -S

配置

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

html

<mavon-editor v-model="topic.des" @change="getIntroduce" :subfield="false" @save="getIntroduce"/>

getIntroduce(val,html){ //val：文本，html：html
    this.topic.des = html
}

 

未完待续...