简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  • 全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
    您现在的位置:首页 >> JS >> 内容

    html直接引用vue和element-ui的方法

    内容摘要:!DOCTYPE htmlhtmlheadmeta charset='UTF-8'link rel='stylesheet' href='https://unpkg.com/element-ui/lib/theme-chalk/index.css'script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js......

      <!DOCTYPE html>

    <html>


    <head>

    <meta charset="UTF-8">

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

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    </head>


    <body>

    <div id="app">

    <el-button round @click="visible = true">圆角按钮</el-button>

    <br>

    <el-dialog :visible.sync="visible" title="Hello world">

    <p>Try Element</p>

    </el-dialog>

    <br>


    <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费">

    </el-switch>

    <el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949"

    active-text="按月付费" inactive-text="按年付费">

    </el-switch>


    <br>

    <el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"

    placeholder="选择时间范围">

    </el-time-picker>

    <el-time-picker is-range arrow-control v-model="value2" range-separator="至" start-placeholder="开始时间"

    end-placeholder="结束时间" placeholder="选择时间范围">

    </el-time-picker>

    <br>


    <el-progress type="circle" :percentage="0"></el-progress>

    <el-progress type="circle" :percentage="25"></el-progress>

    <el-progress type="circle" :percentage="100" status="success"></el-progress>

    <el-progress type="circle" :percentage="70" status="warning"></el-progress>

    <el-progress type="circle" :percentage="50" status="exception"></el-progress>

    <br>

    <el-row>

    <el-button icon="el-icon-search" circle></el-button>

    <el-button type="primary" icon="el-icon-edit" circle></el-button>

    <el-button type="success" icon="el-icon-check" circle></el-button>

    <el-button type="info" icon="el-icon-message" circle></el-button>

    <el-button type="warning" icon="el-icon-star-off" circle></el-button>

    <el-button type="danger" icon="el-icon-delete" circle></el-button>

    </el-row>

    <br>

    <el-steps :active="1" finish-status="success">

    <el-step title="已付款"></el-step>

    <el-step title="退款中"></el-step>

    <el-step title="已退款"></el-step>

    <el-step title="待结算"></el-step>

    <el-step title="已结算"></el-step>

    </el-steps>

    </div>

    </body>

    <script>

    new Vue({

    el: '#app',

    data: function () {

    return { visible: false }

    }

    })

    </script>


    </html>

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/9/2 发布时间:17:13:33 点击:387 
  • 上一篇:js实现全选和全不选功能
  • 下一篇:利用纯css做一个下拉菜单功能的示例代码
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.35 Build 20.8.26(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2020