qianshanxm_ui/qianshandaikuan/static/js/my_component.js

//只渲染静态的
// let str = `
//   <div class="page-loading">
//     <img src='images/load.png'>
//   </div>
// `
// let myComponent = Vue.extend({
//   template:str ,
// })
 
//或者动态在data中返回
let str = `
  <div>
  	<div class="bgbox" v-if="showflag"></div>
  	<div class="pickbox " :class="showflag?'show':''">
  		<div class="top flexcc">
  			<div class="left flex0" @click="getCloseFn">取消</div>
  			<div class="cent"></div>
  			<div class="right flex0" @click="getConfirmFn">确认</div>
  		</div>
  		<div class="box">
  			<div :class="selectval==ite.dictValue?'act':''" @click="getChange(ite)" v-for="(ite,idx) in datalist" :key="idx">{{ite.dictLabel}}</div>
  		</div>
  	</div>
  </div>
`
let myComponent = Vue.extend({
  template:str ,
  props:{
	  showflag:{
		  type: Boolean,
		  default: false
	  },
	datalist:{
		type: [Array],
		default (){
			return [
				
			]
		}
	},
	dataval:{
		type: [String,Number],
		default: ''
	}
  },
  data:function(){
    return {
      childrenTxt:'我是子组件的值哦',
	  selectlab:"",
	  selectval:"",
    }
  },
  watch:{
	  showflag(val){
		 if(!val){
			 this.selectval='' 
		 } 
	  },
	  dataval(val){
		this.selectval=val 
	  }
  },
  methods:{
	  getCloseFn(){
		  this.$emit('getclose','a')
	  },
	  getConfirmFn(){
		  var obj={
			  val:this.selectval,
			  data:this.selectlab
		  }
		this.$emit('getconfirm',obj)
	  },
	  getChange(e){
	  	this.selectval=e.dictValue;
	  	this.selectlab=e;
	  },
  }
})
 
Vue.component('my-load',myComponent )