apicloud 开发app 引用vue+element_ui的方法

水深无声 2021-07-25 21:02 563阅读 0赞

## apicloud软件开发移动端 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
apicloud是基于jq的一套开放平台，可以免费开发app，使用的语法跟jq很相似。

自从用了vue框架之后，我对jq已经相当生疏，看着之前同事的代码真是一个头两个大。

正好有机会可以重构一下页面，我毫不犹豫的使用了vue。

具体实现方式如下：

# 使用cdn引入vue #

`<script type="text/javascript" src="../../script/plug/vue.js"></script>`  
此处我引入的是本地下载好的vue文件，也可以是线上的地址。

apiready = function () { 
      var vm = new Vue({ 
          el: '#wrap_goodson',
          data: function () { 
          	return{ }
          }
      })
    }

apicloud的初始化程序都放在`apiready`中，相当于`document.ready()`.  
此处一定要注意：vue的el属性，这个el绑定的内容是页面的唯一值，需要是ID，并且是唯一的ID，如果移动端的其他页面有跟此ID重复，则可能会报错。我已经踩过一次坑了……

其余的写法跟vue框架一模一样。

# 引入element-ui #

此款app有个页面需要用到日历，如果使用jq也可以获取到：  
代码如下：（此代码是用jq写的，如果是apicloud还需要改动一下获取dom的方式，有些许不同）

最终效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

#### html部分 ####

#### css部分代码 ####

.wrap { 
        width: 600px;
        border: 1px solid #f1f1f1;
    }
    
    .week-wrap { 
        display: flex;
        height: 40px;
        line-height: 40px;
    }
    
    .week-day { 
        flex: 1;
        text-align: center;
        background: #388dee;
        color: #fff;
        border-right: 1px solid #fff;
    }
    
    .day-col { 
        display: flex;
        height: 50px;
        border-bottom: 1px solid #fff;
    }
    
    .day { 
        flex: 1;
        background: #f3f3f3;
        border-right: 1px solid #fff;
    }
    
    .day.pre { 
        color: #bbb;
    }
    
    .day.now { 
        color: #388dee;
    }
    
    .content { 
        font-size: 12px;
    }

#### js部分（使用面向对象（函数调用+原型）的方式） ####

调用对象函数：支持传入指定元素/年份/月份

var canlender = new Canlender({ 
        el: "wrap",
        year: 2021,
        month: 2
    });

对象的构建脚本文件

可以看到：上面的代码很繁琐，element-ui给我们提供了现成的日历组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

## cdn引入element-ui文件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

然后就可以直接使用了

<el-calendar>
      
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <p :class="data.isSelected ? 'is-selected' : ''" @click="selectDayClick(data)">
          { {  data.day.split('-').slice(1).join('-') }} { {  data.isSelected ? '✔️' : ''}}
        </p>
      </template>
    </el-calendar>
    <style>
      .is-selected { 
        color: #1989FA;
      }
    </style>
    <script>
    export default{ 
    	data(){ 
    		return{ }
    	},
    	methods:{ 
    		selectDayClick(data){ 
    			console.log(JSON.stringfy(data));//可以拿到当前点击的日期，然后可以进行后续的操作了 
    		}
    	}
    }
    </script>

使用element-ui代码真的是超级少……

完成！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/a9ca92c3508f4fb8aaee73c07ef75f3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/45373345b0074375beb1d9298705baf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/1f716580ab4944c3a9e1f3f0e19388ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/5182cb8fa73547bf9f620166500de718.png