新建xxx.vue文件
模板代码如下:
最顶部是template标签
import {STable, Ellipsis} from ‘@/components’
import Cropper from ‘cropperjs’
import ‘./index.less’
import ‘cropperjs/dist/cropper.min.css’
import TableDataView from ‘./TableDataView’
export default {
name: ‘dbList’, //和文件名一致
components: {STable, Ellipsis, TableDataView}, //引入的组件
props: {
src: {
type: String,
default: ‘’
},
preview: {
type: Boolean,
default: true
},
moveStep: {
type: Number,
default: 4
},
},
data () {
return {
visible: false,
cropper: null,
insideSrc: ‘’,
checkedKeys: [],
queryParam: {name: ‘’, type: 1},
columns: [{title: ‘名称’,dataIndex: ‘name’,},{title: ‘创建时间’,dataIndex: ‘time’,}]
}
},
onLoad(option) { //执行顺序1
console.log(“Onloadonload!!!”)
this.productId = option.productId
},
onShow(){ //执行顺序2
console.log(“onshowonshowonshowonshow!!!”)
},
mounted() { //执行顺序3
console.log(“mountedmountedmounted!!!”)
this.init();
},
created () {}, //在vue中执行顺序在mounted之前
mounted () {},
beforeDestroy() {
console.log(“离开页面前销毁方法执行…”)
},
computed: {
…mapGetters([‘loginInfo’]),
imgId () {
return cropper${this._uid}
},
previewId () {
return cropper_preview${this._uid}
}
},
watch: {
src (src) {
this.replace(src)
},
},
methods: {
replace (src) {
},
},
}