vue.js中的mixin_使用vue.js进行响应处理的指令和Mixin

vue.js中的mixin

Vue响应 (Vue-Responsive)

Is a directive to use responsive breakpoints on html elements. Because sometimes it's nice to have a chance to let the view do resolution specific things.

是在html元素上使用响应断点的指令。 因为有时有机会让视图执行特定于分辨率的事情会很好。

Dependencies: Only Vue.js 2.0 Browsers tested: Chrome, Firefox and IE11+ Planned: Mixin to trigger methods on breakpoint change Add and remove classes instead of changing only the style

依赖关系：仅Vue.js 2.0受测试的浏览器：Chrome，Firefox和IE11 +计划：混合以在断点更改时触发方法添加和删除类而不是仅更改样式

现场演示 (Live Demo)

http://bamberger.rocks/Vue-Responsive/Demo.html

http://bamberger.rocks/Vue-Responsive/Demo.html

特征 (Features)

This directive adds responsive Feautures to single HTML-Elements without CSS or @Media.

该指令将响应式功能添加到没有CSS或@Media的单个HTML元素中。

The default Responsive breaks follow Bootstrap 4 Responsive Utils.

默认的响应性中断遵循Bootstrap 4 响应性实用程序 。

The Bootstrap 3 breakpoints are includes as well.

还包括Bootstrap 3断点。

用法 (Usage)

With npm and ES6/babel please use the common module:

对于npm和ES6 / babel，请使用公共模块：

npm install vue-responsive -save
import vueResponsive from 'vue-responsive/dist/Vue_Responsive.common'

In the browser just include the script and use the directive on a Html-Element inside a Vue Element

在浏览器中，只需包含脚本并在Vue元素内的Html-Element上使用指令

<script src="Vue-Responsive.js"></script>

Advanced: If you do not want the directive to be globally available just add the attribute notGlobal with a not empty value in the script tag and define it the components with:

高级：如果您不希望指令在全局范围内可用，只需在脚本标记中添加notGlobal属性(其值不为空)，然后使用以下命令将其定义为组件：

<script src="Vue-Responsive.min.js" notGlobal="true" ></script>	
...
direcitves:{
	responsiveness: v_responsiveness
}

Module Systems: The commonJs file has to be included manually in every component or set golbally with Vue.directive('responsiveness', Vue_Responsive);

模块系统： commonJs文件必须手动包含在每个组件中，或者通过Vue.directive('responsiveness', Vue_Responsive);进行Vue.directive('responsiveness', Vue_Responsive);设置Vue.directive('responsiveness', Vue_Responsive);

对于Bootstrap 4断点 (For Bootstrap 4 breakpoints)

At default every resolution is visible, the hidden-all tag changes this to everything hidden (display:none). These tags are valid hidden-all, xs, sm, md, lg, xl, hidden-xs,...,hidden-xl.

默认情况下，每个分辨率都是可见的，hidden-all标签将其更改为所有隐藏的内容(display：none)。 这些标记是有效的hidden-all ， xs ， sm ， md ， lg ， xl ， hidden-xs ，...， hidden-xl 。

<h1 v-responsiveness="'hidden-xs'">Big Title</h1>
<div v-responsiveness="['hidden-all','md','lg']">Only visible in Middle and large Size View</div>
<div v-responsiveness="['hidden-lg']">Only hidden at lg</div>

<h1 v-responsiveness="middleSize">Jumbotron</h1>
...	//in the vue object
data:{
	middleSize:['hidden-all','lg','xl']
}

对于Bootstrap 3断点 (For Bootstrap 3 breakpoints)

Just add :bs3 after the directive to use bootstrap 3 breakpoints:

只需在指令后添加：bs3即可使用引导程序3断点：

<p v-responsiveness:bs3="['hidden-xs']">As you can see on the big picture below.<br /><img ... /></p>

In this defintion the xl breakpoint doesn't exist.

在此定义中， xl断点不存在。

对于自定义的断点 (For self defined breakpoints)

First you have to declar your own breakpoints in the component/root wich wraps the html-elements with the directive. Every definition must start with responsiveMarks$$ and a following name. So you can easily create breakpoints to differentiate between desktop and smartphones for instance, as you can see in the demo.html:

首先，您必须在组件/根目录中声明自己的断点，并用指令包装html-elements。 每个定义都必须以响应标记$$和以下名称开头。 因此，您可以轻松创建断点来区分台式机和智能手机，例如，在demo.html中可以看到：

... //in the vue object
data:{
        responsiveMarks$$twoMarks:   //setting custom responsive breakpoints with the name "twoMarks"
        { smartphone: { show: true, min: -1, max: 767 }, desktop: { show: true, min: 768, max: Infinity } }
} 

<p v-responsiveness:twoMarks="'hidden-desktop'">Visible on smartphone<br /><img src="http://lorempixel.com/360/240/animals" /></p>

You can declar as much own definitions as you wish. Every defintion should have min:-1 for its smalles breakpoint and max:Infinity for its biggest.

您可以根据需要声明尽可能多的自己的定义。 每个定义的小断点应具有min：-1 ，其最大断点应具有max：Infinity 。

翻译自: https://vuejsexamples.com/a-directive-and-mixin-for-responsive-handling-with-vue-js/

vue.js中的mixin