精华内容
下载资源
问答
  • vue显示消息提示框功能

    万次阅读 2019-10-12 11:48:36
    vue显示消息提示框功能 效果图 如下所示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> ....

    vue显示消息提示框功能

    效果图 如下所示
    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<style type="text/css">
    		.toast {
    			position: fixed;
    			z-index: 2000;
    			left: 50%;
    			top: 45%;
    			transition: all .5s;
    			-webkit-transform: translateX(-50%) translateY(-50%);
    			-moz-transform: translateX(-50%) translateY(-50%);
    			-ms-transform: translateX(-50%) translateY(-50%);
    			-o-transform: translateX(-50%) translateY(-50%);
    			transform: translateX(-50%) translateY(-50%);
    			text-align: center;
    			border-radius: 5px;
    			color: #FFF;
    			background: rgba(17, 17, 17, 0.7);
    			height: 45px;
    			line-height: 45px;
    			padding: 0 15px;
    			max-width: 150px;
    		}
    	</style>
    	<body>
    		<!-- 提示框 -->
    		<div id="app">
    			<div @click="binxs">
    				{{username}}
    			</div>
    			<div class="toast" v-show="toastShow">
    				{{toastText}}
    			</div>
    		</div> 
    		<script src="../js/vue.js" type="text/javascript" charset="utf-8">
    		</script>
    		<script>
    			const obj = {
    				toastShow: false,
    				toastText: '',
    				username: '显示消息提示框'
    			}
    			const app = new Vue({
    				el: '#app',
    				data: obj,
    				methods: {
    					toast(str) {
    						let v = this
    						v.toastText = str
    						v.toastShow = true
    						setTimeout(function() {
    							v.toastShow = false
    						}, 1500)
    					},
    					binxs: function(e) {
    						this.toast('显示成功')
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    

    有什么问题欢迎评论留言,我会及时回复你的

    展开全文
  • vue 切换功能 Vue功能切换 (vue-feature-toggle) Enables advanced feature-toggle with vue. 使用vue启用高级功能切换。 Vue-Feature-Toggle implements the feature-toggle-api v 3.3.0". Only a subset of ...

    vue 切换功能

    Vue功能切换 (vue-feature-toggle)

    Enables advanced feature-toggle with vue.

    使用vue启用高级功能切换。

    Vue-Feature-Toggle implements the feature-toggle-api v 3.3.0". Only a subset of features is listed here. For the others, watch the documentation of the api.

    Vue-Feature-Toggle实现了feature-toggle-api v 3.3.0“。此处仅列出了部分功能。对于其他功能,请查看api的文档。

    安装 (Install)

    npm install vue-feature-toggle --save

    问题 (The Problem)

    Imagine you have an onlineshop with an testmode and in multiple languages. Your shop is written in vue. Anywhere you have a vue-template like this:

    想象一下,您有一个具有测试模式和多种语言的网上商店。 您的商店是用vue编写的。 在任何具有这样的vue模板的地方:

    <content-area>
        <!-- Show important debugging information for testmode -->
        <testmode-nav v-if="testmode"></testmode-nav>
    
        <!-- That's the old one, in a few days the new one, commented out here will be released 
            <left-nav-new></left-nav-new>
        -->
        <left-nav></left-nav>
    
        <!-- Every shop has a slider with amazing foodinfo on the startpage-->
        <startpage-slider-de ref="food/bratwurst" v-if="shop == 'de'"></startpage-slider-de>
        <startpage-slider-en ref="food/fishnchips" v-if="shop == 'en'"></startpage-slider-en>
        <startpage-slider-fr ref="food/croissant" v-if="shop == 'fr'"></startpage-slider-fr>
    
        <footer-new></footer-new>
        <!-- 
        New footer just went live. When there are some problems, we rollback and comment out the new footer and uncomment the old one
        <footer-old></footer-old> -->
    </content-area>

    It's generally a bad idea to have visibility rules in the template. Of course, by refactoring the template a little bit the code will look better. But that's not the point. The problem is: The view-logic is spread in .html and .js files and if the viewlogic changes, you have to change at least them. And all visibility rules are spread over the whole system. That's not good.

    在模板中具有可见性规则通常是一个坏主意。 当然,通过稍微重构模板,代码看起来会更好。 但这不是重点。 问题是:视图逻辑分布在.html和.js文件中,如果视图逻辑发生更改,则至少必须更改它们。 并且所有可见性规则都分布在整个系统中。 这不好。

    解决方案 (The solution)

    Feature-toggle. All View-Logic is placed in one place. This can be a config file, a webservice or a tool with a User Interface.a When you want to change a visibility rule, for example "Show feature XYZ also in the french shop", you just have to update the config or add this info in an UI. And no developer is needed for it.

    功能切换。 所有View-Logic都放置在一个地方。 这可以是配置文件,Web服务或带有用户界面的工具。a当您想要更改可见性规则时,例如“在法国商店中也显示XYZ功能”,您只需要更新配置或添加此配置即可。用户界面中的信息。 而且不需要开发人员。

    Read the article from Martin Fowler about feature toggle for a more understanding.

    阅读Martin Fowler撰写的有关功能切换的文章,以了解更多信息。

    用法 (The Usage)

    Look in the example folder for working examples.

    在示例文件夹中查找工作示例。

    初始化 (Initialisation)

    Create a vue project. For example with the vue-cli.

    创建一个vue项目。 例如,使用vue-cli。

    npm install -g vue-cli
        vue init browserify vue-feature-toggle-example
        cd vue-feature-toggle-example
        npm install

    Now install the vue-feature-toggle component.

    现在安装vue-feature-toggle组件。

    npm install vue-feature-toggle --save

    Replace the index.html - file with the following:

    将index.html-文件替换为以下内容:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>vue-feature-example</title>
    </head>
    
    <body>
      <div id="app">
            <!-- The name property is required -->
            <feature name="feature1">This is "Feature1"</feature>
            
            <!-- The variant property is optional and can be any string -->
            <feature name="feature2">This is "Feature2"</feature>
            <feature name="feature2" variant="new">This is "Feature2" with variant "new"</feature>
            <feature name="feature2" variant="old">This "Feature2" with variant "old"</feature>
            <feature name="feature2" variant="grumpfel">This "Feature2" with variant "grumpfel"</feature>
            
            <feature name="feature3" variant="old" data="grumpfel">This "Feature3" with variant "old" has some Data.</feature>
            <feature name="feature3" variant="new" :data="{'text':'grumpfel'}">This "Feature3" with variant "old" has some Data. (watch the : before the data-attribute. Otherwise you'll get this as a string...)</feature>
      </div>
      <script src="dist/build.js"></script>
    </body>
    </html>

    Replace the src/main.js file with the following:

    将src / main.js文件替换为以下内容:

    var Vue = require('vue');
    var feature = require('vue-feature-toggle');
    
    //Feature1 will always be shown
    feature.visibility('feature1',function () {
        return true;
    });
    
    //write down the other visibility-rules here    
    
    var vue = new Vue({
        el: '#app',
        components: { 'feature': feature }
    })
    
    //IMPORTANT: Don't write your rules after the new Vue()-declaration - they won't work here....

    特征 (Features)

    Only a subset of features is listed here. See the documentation of the feature-toggle-api for more features

    此处仅列出部分功能。 有关更多功能,请参见feature-toggle-api文档

    For the next examples we will always use the HTML from above. Just insert the visibility rules under the other rule

    对于下一个示例,我们将始终使用上面HTML。 只需在其他规则下插入可见性规则

    基本可见性 (Basic visibility)

    // shows Feature1
    //Feature2 is not configured, so it will be hidden
    feature.visibility('feature1',true);
    
    //You can also write it like this
    feature.visibility('feature1',function (rule) {
            //here would be some more complex logic, in this example we keep it simple
            return true;
    });
    /* 
        shows all features with name feature2, in this case: 
        <feature name="feature2"/>
        <feature name="feature2" variant="new"/>
        <feature name="feature2" variant="old"/>
        <feature name="feature2" variant="grumpfel"/>
     */
    feature.visibility('feature2', function (rule) {
            return true;
    });
    
    /*
        This overwrites the rule above for "feature2", variant "new"    
        <feature name="feature2"/> -> shown
        <feature name="feature2" variant="new"/> -> hidden
        <feature name="feature2" variant="old"/> -> shown
        <feature name="feature2" variant="grumpfel"/> -> shown
    */
    feature.visibility('feature2','new', function (rule) {
            return false;
    });
    /*
    You can pass data via the data-attribute. Corresp. HTML-Tag: <feature name="feature3" :data="grumpfel"/>
    */
    feature.visibility('feature3','new', function (rule) {
          return rule.data == "grumpfel";
    });
    
    //Write a : before the data-tag to parse the content in the data-attribute <feature name="feature3" :data="{'text':'grumpfel'"/> Otherwise the data is returned as a string.
    feature.visibility('feature3','new', function (rule) {
          return rule.data.text == "grumpfel";
    });

    默认可见性 (Default Visibility)

    Bored of writing the same visibility rule again and again? Use defaultVisibility. This is the default-rule and will be overwritten by feature.visibility() - rules.

    厌倦了一次又一次地编写相同的可见性规则? 使用defaultVisibility。 这是默认规则,将被feature.visibility()-规则覆盖。

    feature.defaultVisibility(function(rule){
        return true;
    });
    
    feature.visibility('feature2', 'new', function(rule){
        return false;
    });
    /*
        "Feature2", variant "new" is overwritten, all other features have the defaultVisibility
        <feature name="feature2"/> -> shown
        <feature name="feature2" variant="new"/> -> hidden
        <feature name="feature2" variant="old"/> -> shown
        <feature name="feature2" variant="grumpfel"/> -> shown
    */

    所需的可见性 (Required Visibility)

    This rule is allways executed, before the other rules. When it returns false, the other rules are ignored.

    该规则始终在其他规则之前执行。 当它返回false时,其他规则将被忽略。

    /*
       Imagine a config that is loaded via ajax. When the name is in the config, it returns true.
       And this config looks like this: 
       var globalConfig = { "feature2" : true }
    */
    
    feature.requiredVisibility(function(rule){
        //In this case it returns true, when name == 'feature2'
        return globalConfig[rule.name] === true;
    });
    
    /*
      feature2, variant "new" returns false, but requiredConfig returns true. Both rules must match, so it will be hidden
    */
    feature.visibility('feature2','new',function(rule){
        return false;
    });
    
    /*
      feature3 returns true, but requiredConfig returns false. Both rules must match, so Feature3 is hidden
    */
    feature.visibility('feature3',function(rule){
        return true;
    });
    
    /*
        <feature name="feature2"/> -> shown
        <feature name="feature2" variant="new"/> -> hidden
        <feature name="feature2" variant="old"/> -> shown
        <feature name="feature2" variant="grumpfel"/> -> shown
        
         <feature name="feature3" variant="old"/> -> hidden
        <feature name="feature3" variant="new"/> -> hidden
    */

    集装箱标签 (Container Tag)

    Normally a feature has a div-element as root-element.

    通常,要素具有div元素作为根元素。

    <feature name="anAmazingFeature">an amazing feature</feature>
        will be rendered to (if visible):
        <div>an amazing feature</div>

    But unfortunately sometimes div-elements are already styled by legacy-css-classes. To prevent this, you can define the root-element.

    但是不幸的是,有时div元素已经由legacy-css-classs设置样式。 为防止这种情况,您可以定义根元素。

    <feature name="anAmazingFeature" tag="span">an amazing feature</feature>
        will be rendered to (if visible):
        <span>an amazing feature</span>

    显示日志 (ShowLogs)

    Imagine this following html-snippet:

    想象下面的html代码片段:

    <!-- Why is this ******* feature hidden? I checked the visibilityrule. It should be visible... -->
        <feature name="anAmazingFeature">This feature should be shown</feature>

    All developers of the world agree with you, debugging sth lik this is horrible. But don't worry, we have a perfect solution for it. And it's just one line of code.

    世界上所有的开发人员都同意您的看法,这很可怕。 但是不用担心,我们有一个完美的解决方案。 这只是一行代码。

    feature.showLogs(); //or feature.showLogs(true);

    This returns a log like the following:

    这将返回如下日志:

    Check Visibility of Feature "anAmazingFeature".
    The requiredVisibility rule returns false. This feature will be hidden.
    
    Check Visibility of Feature "anotherAmazingFeature", variant "new" with data {"id":"bla"}.
    The requiredVisibility rule returns true. This feature will be shown when no other rule rejects it.
    No visibility rule found matching name and variant.
    No rules found for name anotherAmazingFeature without variants.
    No default rule found.
    Only the requiredVisibility rule was found. This returned true. => This feature will be visible.

    With this you don't have to waste your time with debugging the visibility state.

    这样,您就不必浪费时间调试可见性状态。

    记录 (Log)

    Log a custom message, when showLogs() == true.

    当showLogs()== true时,记录自定义消息。

    feature.log("Here's my custom message");

    Noscript (Noscript)

    You work in a company and your customers have disabled javascript? Well, that makes life harder but we can still use it. We can provide at least a basic functionality with pure css. Just look at the modified index.html file.

    您在一家公司工作,而您的客户已禁用JavaScript? 好吧,这使生活更加艰难,但我们仍然可以使用它。 我们至少可以提供纯CSS的基本功能。 只需查看修改后的index.html文件。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>vue-feature-example</title>
       <style type="text/css">
       /*Hides all features by default. When javascript is enabled, this attribute is overwritten*/
        feature{
          display:none;
        }
    
        /*Shows all features with noscript attribute*/
        feature[noscript="noscript"], feature[noscript="true"]{
          display:block;
        }
        </style>
    </head>
    
    <body>
      <div id="app">
            <feature name="feature1">This is hidden without javascript</feature>
            
            <feature name="feature2" noscript="noscript">This is shown without javascript.</feature>
            <feature name="feature2" variant="new" noscript="true">This is shown without javascript.</feature>
      </div>
      <script src="dist/build.js"></script>
    </body>
    </html>

    翻译自: https://vuejsexamples.com/enables-advanced-feature-toggle-with-vue/

    vue 切换功能

    展开全文
  • vue 实时消息插件 移动消息 (m-message) A message plugin for vue. vue消息插件。 Refer to the implementation of ElementUI message component. Style reference ant-message component. 请参阅ElementUI...

    vue 实时消息插件

    移动消息 (m-message)

    A message plugin for vue.

    vue的消息插件。

    Refer to the implementation of ElementUI message component. Style reference ant-message component.

    请参阅ElementUI消息组件的实现。 样式参考蚂蚁消息组件。

    import Message from 'vue-m-message'
    
    Vue.use(Message) // will mount `Vue.prototype.$message`
    Vue.use(Message, {name: 'msg'}) // will mount `Vue.prototype.$msg`

    讯息API (Message API)

    • Message(options) Show a message

      消息(选项)显示消息

    • Massage.info(msg|options) Info type message

      Massage.info(msg | options) Info类型消息

    • Massage.success(msg|options) Success type message

      Massage.success(msg | options) Success类型消息

    • Massage.error(msg|options) Error type message

      Massage.error(msg | options) Error类型消息

    • Massage.warning(msg|options) Warning type message

      Massage.warning(msg | options) Warning类型消息

    • Massage.loading(msg|options) Loading type message

      Massage.loading(msg | options) Loading类型消息

    选项 (options)

    AttributeDescriptionTypeAccepted ValuesDefault
    optionsmessage optionsobject
    options.typemessage typestring'info', 'success', 'error', 'warning', 'loading'info
    options.messagemessage contentstring''
    options.showCloseshow close buttonfalse/truefalse
    options.onCloseclose callback functionfunction
    options.durationmessage display duration, unit ms, -1 not closednumber3000
    options.zIndexz-indexnumber1010
    options.alginshow positionstringcenter
    属性 描述 类型 接受值 默认
    选项 讯息选项 目的 - -
    options.type 讯息类型 “信息”,“成功”,“错误”,“警告”,“正在加载” 信息
    options.message 讯息内容 - ''
    options.showClose 显示关闭按钮 错误/正确 -
    options.on关闭 关闭回调函数 功能 - -
    options.duration 信息显示持续时间,单位毫秒,-1未关闭 - 3000
    options.zIndex 索引 - 1010
    options.algin 显示位置 中央

    翻译自: https://vuejsexamples.com/a-message-plugin-for-vue/

    vue 实时消息插件

    展开全文
  • Vue 基本功能介绍

    千次阅读 2018-05-31 17:24:48
    1 Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库...

    1 Vue.js 是什么

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程。 如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看对比其它框架。

    2 起步

    假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧!之前有其它框架的使用经验会有帮助,但这不是必需的。

    尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue:

    <!-- 开发环境版本,包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    或者:

    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    请注意我们不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时。

    3 声明式渲染

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

    html:

    <div id="app">
        {{message}}
    </div>

    js:

     var app = new Vue({
            el: '#app',
            data: {
                message: '好消息!'
            }
        });

    效果:

    我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。

    除了文本插值,我们还可以像这样来绑定元素特性:

    html:

    <div id="app-2">
        <span v-bind:title="message">
            动态绑定的提示信息
        </span>
    </div>

    js:

     var app2 = new Vue({
            el: '#app-2',
            data: {
                message: '页面加载时间:' + new Date().toLocaleString()
            }
        });

    这里我们遇到了一点新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

    如果你再次打开浏览器的 JavaScript 控制台,输入 app2.message = ‘新消息’,就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

    4 条件与循环

    控制切换一个元素是否显示也相当简单。

    html:

    <div id="app-3">
        <p v-if="seen">显示状态</p>
    </div>

    js:

    var app3=new Vue({
            el: '#app-3',
            data: {
                seen:true
            }
        });

    继续在控制台输入 app3.seen = false,你会发现之前显示的消息消失了。

    这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性,还可以绑定到 DOM 结构。此外,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

    还有其它很多指令,每个都有特殊的功能。例如,v-for 指令可以绑定数组的数据来渲染一个项目列表:

    html:

    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>

    js:

    var app4=new Vue({
            el: '#app-4',
            data: {
                todos:[
                    {text:'参加培训'},
                    {text:'参加讲座'}
                ]
            }
        });

    效果:

    在控制台里,输入 app4.todos.push({ text: ‘新项目’ }),你会发现列表最后添加了一个新项目。

    5 处理用户输入

    为了让用户和你的应用进行交互,我们可以用 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法:

    html:

    <div id="app-5">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">逆转文本</button>
    </div>

    js:

     var app5 = new Vue({
            el: '#app-5',
            data: {
                message: '喜气盈门'
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('');
                }
            }
        });

    按钮点击前:

    按钮点击后:

    注意在 reverseMessage 方法中,我们更新了应用的状态,但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理,你编写的代码只需要关注逻辑层面即可。

    Vue 还提供了 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。

    html:

    <div id="app-6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

    js:

    var app6 = new Vue({
            el: '#app-6',
            data: {
                message: '喜气盈门'
            }
        });

    效果:

    6 组件化应用构建

    组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:

    在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单。

    js:

    Vue.component('todo-item', {
    //        自定义特性
            props: ['todo'],
            template: '<li>{{todo.text}}</li>'
        });
    • 这里接受一个 props 作为参数,把父作用域中的数据传到组件中。
    • props 的参数名为 todo。

    现在,我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中:

    HTML:

    <div id="app-7">
        <ol>
            <!-- 使用组件实例-->
            <todo-item
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id"
                    ></todo-item>
        </ol>
    </div>

    js:

    var app7=new Vue({
       el:"#app-7",
        data:{
            groceryList:[
                {id:0,text:'白菜'},
                {id:1,text:'牛奶'},
                {id:2,text:'苹果'}
            ]
        }
    });

    效果:

    尽管这只是一个刻意设计的例子,但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 <todo-item> 组件,提供更为复杂的模板和逻辑,而不会影响到父单元。

    在一个大型应用中,有必要将整个应用程序划分为组件,以使开发更易管理。在后续教程中我们将详述组件,不过这里有一个 (假想的) 例子,以展示使用了组件的应用模板是什么样的:

    <div id="app">
      <app-nav></app-nav>
      <app-view>
        <app-sidebar></app-sidebar>
        <app-content></app-content>
      </app-view>
    </div>

    7 与自定义元素的关系

    你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是,还是有几个关键差别:

    1. Web 组件规范仍然处于草案阶段,并且未被所有浏览器原生实现。相比之下,Vue 组件不需要任何 polyfill,并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时,Vue 组件也可以包装于原生自定义元素之内。

    2. Vue 组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

    展开全文
  • Vue排序功能

    千次阅读 2019-07-18 13:40:54
    先看效果图: HTML部分 <div> <el-button @click="toggleSort('money', false)" type="primary">从小到大<...el-button @click="toggleSort('money', true)" type="primary">从...
  • vue消息推送【个推】

    千次阅读 2019-04-30 14:20:34
    由于个推在市场上使用量比较多,于是就开启了我的Vue消息推送个推之旅。 而此时发现个推的开发者中心注册账号时,需要: 这些他必须要得提供。我们知道android包名和IOS bundleID就是我们使用Hbuilder的包名,...
  • 思路:使用element-ui中的previewSrcList 开启预览大图的功能。 绑定双击事件,把消息中的url拿到 判断双击事件是否绑定有图片id,预览图片 预览图片 <!--图片预览--> <div style="z-index: 9999999;"&...
  • 需求:撤回消息 思路 鼠标右键弹出 撤回 按钮 点击撤回按钮,拿到当前选中消息id,遍历消息列表拿到消息相关数据,主要是拿到用户名 通过接口撤回当前消息 在撤回成功回调中重新更新列表数据 到这里,有两个办法...
  • 回车发送消息 <!--输入区域--> <div class="messagesBox-BigRight-down20-input"> <div style="z-index: 9999"> <el-input class="inputmsg" type="textarea" :rows="4" placehol
  • 发送消息文本数据 思路: 输入框输入文本数据,点击发送 通过发送成功后,把消息数据显示到聊天页面中 收到消息同理
  • 需求:左右聊天气泡 聊天气泡分为矩形和三角形 例如微信气泡 使用伪元素,设置三角形 <div class="chatBox chatBox-left"> 你好 </div> .chatBox{ position: relative; margin:12px;...
  • 实现功能 自定义文本 自定义类型(默认,消息,成功,警告,危险) 自定义过渡时间 使用vue-cli3.0生成项目 toast全局组件编写 /src/toast/toast.vue v-if=isShow class={ xss=removed xss=removed xss=...
  • //展示消息 showMsg(msgList, flag) { var html = ''; let newMesList = msgList; let newMesListA = []; for (let i = 0; i < msgList.length; i++) { newMesListA.push(this._hisDeal(msgList[i])); } ...
  • vue实现登陆功能

    万次阅读 2018-09-10 16:04:24
    最近在学习vue,发现了vue的好多坑,比如怎么更好的获取input框输入的值而减少获取dom节点的消耗 ,以及怎么绑定一个函数,去执行业务逻辑。 1、首先说说怎么获取input框的值 vue中提供了一个ref属性,这里需要在...
  • vue实现打印功能

    千次阅读 2021-03-13 17:06:26
    打印功能可以自己使用原生js(window.print())实现,其次就是使用插件,介绍两个打印插件 一、vue-print-nb:这个插件使用起来便捷,用法如下 1.安装 npm install vue-print-nb --save 2.在main.js文件中注册...
  • vue 环境下,需要js 动态创建wx-open-subscribe 这个标签,不能按照官网的直接在页面里面写, 首选在页面你需要展示的地方写个dom元素 <div id="sub"> 这里是放订阅消息按钮的,标签i.
  • vue + webSocket 实时任务信息通知 WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。 它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的...
  • vue实现消息提示框

    千次阅读 2020-04-28 23:47:41
    我们常常看到很多vue生态下的ui框架的消息提示框,在页面切换的时候依然停留在页面,我们知道vue这种单页面渐进式框架,所有的操作和元素都是挂载在一个节点上的,当路由变化是整个节点下的dom元素也在重新渲染,若...
  • 预览 艾特开始 ...3.要实现艾特提示,输入框显示的是“@某某某”,实际发出去的消息,把@某某某转换为我们限定的某字符串,然后收到消息通过字符串匹配即可 下面,我们来一步步实现这功能吧 ...
  • vue

    2021-01-07 19:18:56
    Vue.js 简介 1.Vue (读音 /vjuː/,类似于 view)的简单认识 (1)Vue是一个渐进式的框架,什么...(2)Vue有很多特点和Web开发中常见的高级功能 解耦视图和数据 可复用的组件 前端路由技术 状态管理 虚拟DOM
  • vue声音报警功能

    2021-03-18 13:52:55
    1.在页面上添加audio <template> <div> <audio id="audio" src="/static/newjingbao.mp3"/> //src 后面的链接是我保存在static文件下的一段报警声 ...el-button type="warning" icon="el-icon-...
  • vue+vuex仿telegram app的单页应用,实现分组功能消息发送 前言 vue2仿telegram这个项目我把自己所学的vue大部分知识都用上了,可以说覆盖了vue和vuex的大部分知识,通过这项目对vue有了更加深刻的理解以及更灵活的...
  • 先说一下项目背景,要求开发一个预警功能,我的思路是用springboot的定时任务循环查询数据库是否有预警记录,然后向websocket发送消息,此处的websocket是vue框架下,每打开一个页面建立一个连接(抱歉,vue全局变量...
  • Vue

    2020-03-19 21:10:22
    Vue Vue是一个前端js框架,由尤雨溪开发,是个人项目 目前由饿了么ude团队进行维护 Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟...
  • 前言 由于业务需求,需要使用一个消息的全局通知组件,项目原来是使用Element上的通知组件,但是到了后面发现Element的通知组件无法满足消息通知的时间性...这个是通知组件设计时的vue上的目录结构 通知组件的...
  • 1,在 .vue 文件中引入 mqttws31.js 文件(mqttws31.js 文件代码在本页底部) import '@/utils/mqttws31' 2,在 .vue 文件中添加代码 export default { data() { return { client: new Paho.MQTT.Client('...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,253
精华内容 8,501
关键字:

vue消息功能

vue 订阅