前端页面 cdn引入 elementUI和vuejs使用

最新推荐文章于 2023-12-06 14:15:33 发布

原创最新推荐文章于 2023-12-06 14:15:33 发布 · 3.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html5 #elementui

样式数据处理 H5 vue 专栏收录该内容

19 篇文章

订阅专栏

该博客介绍了如何在H5页面中直接通过CDN引入Element UI库，包括Vue.js和Element UI的引用，以及如何使用Element UI组件如Dialog和Checkbox Group进行界面交互。在创建Vue实例时进行了初始化配置，并展示了相关的HTML标签使用示例。

这里写自定义目录标题

H5直接使用cdn引入 elementUI vue(照常使用)

H5直接使用cdn引入 elementUI vue(照常使用)

1、cdn引入（建议下载到本地）

<script type="text/javascript" src="../js/vue.js"></script>
<!--
<script type="text/javascript" src=".../js/element.js"></script>
<link rel="stylesheet" href=".../style/element.css" type="text/css" />
-->
<!-- 引入样式 -->
<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>

2、html标签使用elementUi

 <a href="javascript:void(0);" @click="modifyTopics(<?php echo $d['id']; ?>)" ><?php echo $d['topics']; ?></a>
<el-dialog
        :visible.sync="visible"
        title="话题修改"
        width="80%"
        :append-to-body="true"
        :lock-scroll="false"
        :close-on-click-modal="false">
  <el-form :model="form">
  <el-form-item label="">
    <el-checkbox-group v-model="form.topics">
      <el-checkbox v-for="item in topic_list" :key="item.id" :label="item.id" name="type">{{item.name}}</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="submitTopic()">确 定</el-button>
  </div>

</el-dialog>

3、正常使用vue初始化

<div id="app">

</div>

new Vue({
      el: '#app',
        data: {
            api:'hsBack.php',
            form:{
                post_id:0,
                topics:[]
                },
            visible: false,
            topic_list:[]
        },
        created: function() {
                var that = this;
                that.getTopicList();
        },
		 methods: {
		
			}
})