vue单页引用--卡片化demo

什么时候需要卡片化

无疑在单页应用中，卡片化是节约页面空间美化页面的不二选择。
本次demo主要是根据element组件el-card实现。
点击进入官网指导
demo效果图：

主要代码

html部分省略参考官网
js部分：

export default {
//   name: 'house',
  components: {
  },
    data() {
       return{
            message:'',
            title:'',
            dialogVisible:false,
            thisButtonLoading:false,
            valueees:'0',
            house_id:'',
            address:'',
            values:[{
          value: '0',
          label: '男方'
        }, {
          value: '1',
          label: '女方',
        }, {
          value: '2',
          label: '小孩'
        }, {
          value: '3',
          label: '共同所有'
        }],
       params:{}
        }
    },
    methods:{
        submitData(){
           console.log('开始保存房屋信息') 
           this.thisButtonLoading=true
            this.params={
              house_id:this.house_id,
              address:this.address,
              householder:this.values[this.valueees]['label']
            }
           console.log('房屋id:'+this.params.house_id+' 房屋地址：'+this.params.address+' 房屋所有者：'+this.params.householder)
           this.isparams()
        },
        isparams(){
            if(this.params.house_id=='' ||this.params.address=='' ||this.params.householder==''){
                this.dialogVisible=true
                this.thisButtonLoading=false
                this.message="保存失败：参数不能为空"
                this.title='执行失败'
            }
            else{
                testhouse(this.params).then(response => {
                console.log(response.data.data)
                this.dialogVisible=true
                this.thisButtonLoading=false
                this.message=response.data.data
                this.title='执行结果'
        })
            }
        },
        dialogVisible1(){
            this.dialogVisible=false
            this.thisButtonLoading=false
        }
        
    }
}

总结

1、卡片化引用需要注意整体样式，可样式调整组件化，然后在引入卡片组件，样式控制事半功倍
2、公用的html部分组件化，减少代码量，后期改造更方便。如弹框提示每个卡片都会用到，这种就需组件化处理避免重复造轮子。