链接:https://pan.baidu.com/s/1P8mPrHZjyRtzw1NWnAx-9w
提取码:cjl5
接口文档:https://www.showdoc.cc/xinghan
打开index.html
2.1 创建一个叫mjz的目录
复制一份<dd></dd>标签
<dd data-name="console" > <!--<iframe src="starrysky_v2/test.html">test</iframe>--> <a lay-href="starrysky_v2/mjz.html">mjz</a> </dd>
2.2 在starrysky_v2目录下创建一个mjz.html
Element开发组件
https://element.eleme.cn/#/zh-CN
3.1 把样式和组件库导入到mjz.html里
<!-- 引入样式 --> <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>
检查
3.2 添加一个搜索输入框、下拉框、搜索按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mjz</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <div id="search"> <el-form :inline="true" :model="query_search" class="demo-form-inline"> <el-form-item> <el-input v-model="query_search.search" placeholder="搜索"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="query_search.project" placeholder="活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> </el-form-item> </el-form> </div> </div> <!-- import Vue before Element --> <script src="../js/vue.js"></script> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: ‘#app‘, data: { query_search: { search: ‘‘, project: ‘‘ } }, methods: { onSubmit() { console.log(‘submit!‘); } } }) </script> </body> </html>
注意:VUE必须防止Element前
原文:https://www.cnblogs.com/zibinchen/p/12075877.html