1.6.55 • Published 7 years ago

bh-vue v1.6.55

Weekly downloads
1
License
ISC
Repository
-
Last release
7 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

7 years ago

1.6.54

7 years ago

1.6.53

7 years ago

1.6.52

7 years ago

1.6.51

7 years ago

1.6.50

7 years ago

1.6.49

7 years ago

1.6.48

7 years ago

1.6.47

7 years ago

1.6.46

7 years ago

1.6.45

7 years ago

1.6.44

7 years ago

1.6.43

7 years ago

1.6.42

7 years ago

1.6.41

7 years ago

1.6.40

7 years ago

1.6.39

7 years ago

1.6.38

7 years ago

1.6.37

7 years ago

1.6.36

7 years ago

1.6.35

7 years ago

1.6.34

7 years ago

1.6.33

7 years ago

1.6.32

7 years ago

1.6.31

7 years ago

1.6.30

7 years ago

1.6.29

7 years ago

1.6.28

7 years ago

1.6.27

7 years ago

1.6.26

7 years ago

1.6.25

7 years ago

1.6.24

7 years ago

1.6.23

7 years ago

1.6.22

7 years ago

1.6.20

7 years ago

1.6.19

7 years ago

1.6.18

7 years ago

1.6.17

7 years ago

1.6.16

7 years ago

1.6.15

7 years ago

1.6.14

7 years ago

1.6.13

7 years ago

1.6.12

7 years ago

1.6.11

7 years ago

1.6.10

7 years ago

1.6.9

7 years ago

1.6.8

7 years ago

1.6.7

7 years ago

1.6.6

7 years ago

1.6.5

7 years ago

1.6.4

7 years ago

1.6.3

7 years ago

1.6.2

7 years ago

1.6.1

7 years ago

1.6.0

7 years ago

1.5.9

7 years ago

1.5.8

7 years ago

1.5.7

7 years ago

1.5.6

7 years ago

1.5.5

7 years ago

1.5.4

7 years ago

1.5.3

7 years ago

1.5.2

7 years ago

1.5.1

7 years ago

1.5.0

8 years ago

1.4.9

8 years ago

1.4.8

8 years ago

1.4.7

8 years ago

1.4.6

8 years ago

1.4.5

8 years ago

1.4.4

8 years ago

1.4.3

8 years ago

1.4.2

8 years ago

1.4.1

8 years ago

1.4.0

8 years ago

1.3.9

8 years ago

1.3.8

8 years ago

1.3.7

8 years ago

1.3.6

8 years ago

1.3.5

8 years ago

1.3.4

8 years ago

1.3.3

8 years ago

1.3.2

8 years ago

1.3.1

8 years ago

1.3.0

8 years ago

1.2.9

8 years ago

1.2.8

8 years ago

1.2.7

8 years ago

1.2.6

8 years ago

1.2.5

8 years ago

1.2.4

8 years ago

1.2.3

8 years ago

1.2.2

8 years ago

1.2.1

8 years ago

1.2.0

8 years ago

1.1.9

8 years ago

1.1.8

8 years ago

1.1.7

8 years ago

1.1.6

8 years ago

1.1.5

8 years ago

1.1.4

8 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.9

8 years ago

1.0.8

8 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago