1.6.55 • Published 9 years ago

bh-vue v1.6.55

Weekly downloads
1
License
ISC
Repository
-
Last release
9 years ago

基于jqwidget和EMAP封装的Vue组件

引入组件库:

npm install bh-vue

包含第三依赖库的页面模板:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jqwidget-based Vue Components</title>
    <!-- <link rel="stylesheet" href="//res.wisedu.com/fe_components/bh.css" type="text/css" /> -->
    <link rel="stylesheet" href="//res.wisedu.com/fe_components/jqwidget/blue/bh.min.css" />
    <link rel="stylesheet" href="//res.wisedu.com/fe_components/jqwidget/blue/bh-scenes.min.css" id="bhThemes" />
    <link rel="stylesheet" href="//res.wisedu.com/bower_components/fontawesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="//res.wisedu.com/fe_components/iconfont/iconfont.css">
    <link rel="stylesheet" href="//res.wisedu.com/bower_components/selectize/dist/css/selectize.bootstrap3.css">
    <link rel="stylesheet" href="//res.wisedu.com/fe_components/selectize/select.css">
    <link rel="stylesheet" href="//res.wisedu.com/bower_components/summernote-0.8.1/dist/summernote-bs3.min.css">
    <link rel="stylesheet" href="//res.wisedu.com/bower_components/summernote-0.8.1/dist/summernote.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="//res.wisedu.com/bower_components/jquery/dist/jquery.min.js"></script>
    <!-- <script src="./vendors/bh/bh.map.js"></script> -->
    <!-- jqxwidget -->
    <script src='//res.wisedu.com/fe_components/jqwidget/jqxwidget.min.js'></script>
    <script src="//res.wisedu.com/fe_components/jqwidget/globalize.js"></script>
    <script src="//res.wisedu.com/fe_components/jqwidget/globalize.culture.zh-CN.js"></script>
    <!-- bh -->
    <script src="//res.wisedu.com/fe_components/bh.min.js"></script>
    <script src="//res.wisedu.com/fe_components/bh_utils.js"></script>
    <script src="//res.wisedu.com/bower_components/sortable/Sortable.min.js"></script>
    <script src="//res.wisedu.com/bower_components/selectize/dist/js/standalone/selectize.min.js"></script>
    <!-- <script src="//res.wisedu.com/fe_components/we/we.pagination.js"></script> -->
    <!-- 文件上传控件依赖库 -->
    <script src="//res.wisedu.com/bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="//res.wisedu.com/bower_components/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
    <script src="//res.wisedu.com/bower_components/blueimp-file-upload/js/jquery.fileupload.js"></script>
    <!-- 日历控件依赖库 -->
    <script src='//cdn.bootcss.com/moment.js/2.13.0/moment.min.js'></script>
    <script src='//cdn.bootcss.com/moment.js/2.13.0/locale/zh-cn.js'></script>
    <script src='//cdn.bootcss.com/underscore.js/1.5.2/underscore-min.js'></script>
    <!-- <script src='vendors/CLNDR.js'></script> -->
    <script src='//cdn.bootcss.com/clndr/1.4.4/clndr.min.js'></script>
    <!-- nicescroll -->
    <script src="//res.wisedu.com/bower_components/jquery.nicescroll/jquery.nicescroll.min.js"></script>
    <!-- EMAP 依赖库 -->
    <script src='//cdn.bootcss.com/hogan.js/3.0.2/hogan.min.js'></script>
    <script src='//res.wisedu.com/fe_components/emap.js'></script>
    <!-- mock.js 在开发环境无法模拟post请求数据时使用 -->
    <!-- <script src='//res.wisedu.com/fe_components/mock/mock.js'></script> -->
    <!-- 富文本编辑器 -->
    <script src="//res.wisedu.com/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="//res.wisedu.com/bower_components/summernote-0.8.1/dist/summernote.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html> 

示例页面:

<template>
    <article bh-layout-role="single-no-title">
        <section class="bh-mh-8 bh-mv-8">
            <header>
                <h2>富文本编辑器</h2>
            </header>
            <div class="bh-row bh-mt-16">
                <div class="bh-col-md-6 bh-mv-8 bh-mb-16">
                    <emap-editor v-ref:ee :options='options'></emap-editor>
                </div>
                <div class="clearfix"></div>
                <div class="bh-col-md-6 bh-mv-8">
                    <button class='bh-btn bh-btn-default' @click='getContent'>获取输入内容</button>
                    <button class='bh-btn bh-btn-default' @click='setValue'>设置内容</button>
                    <button class='bh-btn bh-btn-default' @click='clear'>清空内容</button>
                    <button class='bh-btn bh-btn-default' @click='disable'>禁用</button>
                    <button class='bh-btn bh-btn-default' @click='enable'>启用</button>
                    <button class='bh-btn bh-btn-default' @click='isEmpty'>是否为空</button>
                </div>
            </div>
        </section>
    </article>
</template>

<script>
    import EmapEditor from 'components/emap-editor/emapEditor.vue'

    export default {
        data: function() {
            return {
                options: {
                    contextPath: 'http://localhost:3000/mock/emap/major-model.json'
                }
            }
        },
        methods: {
            getContent: function() {
                console.log(this.$refs.ee.getValue());
            },
            setValue: function() {
                this.$refs.ee.setValue('<p>Hello World, Hello Dog !</p>');
            },
            clear: function() {
                this.$refs.ee.clear();
            },
            disable: function() {
                this.$refs.ee.disable();
            },
            enable: function() {
                this.$refs.ee.enable();
            },
            isEmpty: function() {
                alert(this.$refs.ee.isEmpty());
            }
        },
        components: {EmapEditor}
    }
</script>

组件文档参考:http://res.wisedu.com/FE/vue-doc/index.html

1.6.55

9 years ago

1.6.54

9 years ago

1.6.53

9 years ago

1.6.52

9 years ago

1.6.51

9 years ago

1.6.50

9 years ago

1.6.49

9 years ago

1.6.48

9 years ago

1.6.47

9 years ago

1.6.46

9 years ago

1.6.45

9 years ago

1.6.44

9 years ago

1.6.43

9 years ago

1.6.42

9 years ago

1.6.41

9 years ago

1.6.40

9 years ago

1.6.39

9 years ago

1.6.38

9 years ago

1.6.37

9 years ago

1.6.36

9 years ago

1.6.35

9 years ago

1.6.34

9 years ago

1.6.33

9 years ago

1.6.32

9 years ago

1.6.31

9 years ago

1.6.30

9 years ago

1.6.29

9 years ago

1.6.28

9 years ago

1.6.27

9 years ago

1.6.26

9 years ago

1.6.25

9 years ago

1.6.24

9 years ago

1.6.23

9 years ago

1.6.22

9 years ago

1.6.20

9 years ago

1.6.19

9 years ago

1.6.18

9 years ago

1.6.17

9 years ago

1.6.16

9 years ago

1.6.15

9 years ago

1.6.14

9 years ago

1.6.13

9 years ago

1.6.12

9 years ago

1.6.11

9 years ago

1.6.10

9 years ago

1.6.9

9 years ago

1.6.8

9 years ago

1.6.7

9 years ago

1.6.6

9 years ago

1.6.5

9 years ago

1.6.4

9 years ago

1.6.3

9 years ago

1.6.2

9 years ago

1.6.1

9 years ago

1.6.0

9 years ago

1.5.9

9 years ago

1.5.8

9 years ago

1.5.7

9 years ago

1.5.6

9 years ago

1.5.5

9 years ago

1.5.4

9 years ago

1.5.3

9 years ago

1.5.2

9 years ago

1.5.1

9 years ago

1.5.0

9 years ago

1.4.9

9 years ago

1.4.8

9 years ago

1.4.7

9 years ago

1.4.6

9 years ago

1.4.5

9 years ago

1.4.4

10 years ago

1.4.3

10 years ago

1.4.2

10 years ago

1.4.1

10 years ago

1.4.0

10 years ago

1.3.9

10 years ago

1.3.8

10 years ago

1.3.7

10 years ago

1.3.6

10 years ago

1.3.5

10 years ago

1.3.4

10 years ago

1.3.3

10 years ago

1.3.2

10 years ago

1.3.1

10 years ago

1.3.0

10 years ago

1.2.9

10 years ago

1.2.8

10 years ago

1.2.7

10 years ago

1.2.6

10 years ago

1.2.5

10 years ago

1.2.4

10 years ago

1.2.3

10 years ago

1.2.2

10 years ago

1.2.1

10 years ago

1.2.0

10 years ago

1.1.9

10 years ago

1.1.8

10 years ago

1.1.7

10 years ago

1.1.6

10 years ago

1.1.5

10 years ago

1.1.4

10 years ago

1.1.3

10 years ago

1.1.2

10 years ago

1.1.1

10 years ago

1.1.0

10 years ago

1.0.9

10 years ago

1.0.8

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago