精华内容
下载资源
问答
  • Vue框架设置响应式布局

    万次阅读 多人点赞 2018-09-03 09:51:20
    回到主题,自适应响应式布局这个话题古老而新颖,从最早的不同分辨率的屏幕,到现在遍布各个生活角落的移动设备,响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中,bootstrap一直是响应式的头号选择...

    最近折腾自己的网站,在自适应方面发现有了很多新的方法,感叹前端的技术真是日新月异,从以前只能这样,到现在除了这样,还可以那样,甚至再那样......技术永无止境啊。

    回到主题,自适应响应式布局这个话题古老而新颖,从最早的不同分辨率的屏幕,到现在遍布各个生活角落的移动设备,响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中,bootstrap一直是响应式的头号选择,的确,其中的各种xl,xs,栅格布局让响应式变得很容易。

    话说,这Vue做响应式,其实一点都不复杂:一个生命周期钩子,一个条指令,一套js判断语句解决,说到这,高手们应该早已经明白如何操作了, 这篇文章就给广大刚入门的同学们拓宽一下吧(不熟悉Vue的同学,还是先恶补一下Vue基础吧)。

    一个生命周期钩子——mounted:挂载时操作;一条指令——v-show(本例中采用,非绝对):根据条件显示;一套js判断语句:if/else或者switch/case。具体操作起来很简单:(代码直接展示)

    <!--这是一段导航html-->
    <nav id="nav-part" class="easyUtil-backImgPostion easyUtil-flexContainerRow">
    	<ul class="easyUtil-flexContainerRow">
    		<li class="nav-list" :class="nav.className" v-for="(nav,i) in navs">
    			<a :href="nav.href">{{nav.name}}</a>
    		</li>
    	</ul>
    <div id="serach-part" v-show="show"><input type="search" id="search" :placeholder="placeholder" class="easyUtil-input"><button id="searchBtn" class="easyUtil-btn">{{btn}}</button></div>
    </nav>
    var head = new Vue({
    	el : "#head",
    	data : {
            //此处省略一千字
    		show : true
    		},
    	mounted : function(){
    		//可用于设置自适应屏幕,根据获得的可视宽度(兼容性)判断是否显示
    		let w = document.documentElement.offsetWidth || document.body.offsetWidth;
    		if(w < 1000){
    			this.show = false;
    		}
    })

    我的目的是在移动设备中不显示搜索栏(search-part)部分,那么利用v-show,和mounted配合,在挂载时检测一下屏幕可视宽度,如果小于1000,则认为是手机,v-show设为false,不显示即可。

    看,很简单吧,简单到我觉得自己好像在忽悠。其实到这里,原理已经说完,具体的应用大家可以自行发挥,而且也不一定就用v-show,我这里是为了显示与否,如果大家想添加样式什么的,还可以写别的,甚至于计算属性,watch都可以。只要记住在挂载的时候完成即可,不然页面会有跳动,不利于体验。

    可能有人会问,用css的@media就可以完成了,为啥用js,我这里想说的是,我并没有否认@media,这里只是写出更多一种方式,同时结合一下现在很火的前端框架。多一种方法,就多一种解决思路,不至于再回到以前"只能这样"的道路上。具体到实际应用中,当然是最适合的方法为主。前端水深,前端的路子也越来越多,越来也丰富,敞开思维,就会看见不同的天空。

    ps一句,js确实需要刷新页面重新加载才会显示,也就是说如果用户将页面从大屏移动到小屏幕,就可能出现布局不响应问题,但是在实际使用中,这种情况几乎不会出现,因为用户不能可能将电脑打开的网页,直接移动到手机上,操作永远都是重新打开,所以js,css在显示效果上是没有区别的(当然如果js太过复杂,性能会有影响)。另外,文中方法的兼容性问题,只要支持Vue的浏览器,都没问题。

    就说到这吧,欢迎大神指正,不胜感激!

     

    工作累了吧,可以扫描二维码关注公众号,看看轻松的文章,放松一下。再忙,也该有自己的生活,一定要爱惜身体!

    展开全文
  • vue 响应式布局组件A few years ago I started to hear a lot about Web Components. I got pretty excited and then totally forgot about them as the noise settled down. It turns out there has been some good...

    vue 响应式布局组件

    A few years ago I started to hear a lot about Web Components. I got pretty excited and then totally forgot about them as the noise settled down. It turns out there has been some good movement and support is starting to increase. Responsive Web Components, in particular, are set to really simplify how we approach responsive design. As promising as this sounds, there are four questions many developers out there will want to know before they start using them today:

    几年前,我开始听到很多有关Web组件的信息。 我非常兴奋,但随着噪音逐渐消失,他们完全忘记了它们。 事实证明,目前已有一些良好的运动,并且支持开始增加。 尤其是响应式Web组件旨在真正简化我们进行响应式设计的方式。 听起来如此有前途,但是许多开发人员在开始使用它们之前会想知道四个问题:

    Will they…

    他们会吗…

    • Fit into the current state of the web?

      适合网络的当前状态?
    • Work cross browser?

      使用跨浏览器?
    • Adapt to fit the space they are dropped into?

      适应以适应他们掉进的空间?
    • Promote modular code?

      推广模块化代码?

    In this article, we will explore the answers to each of those questions!

    在本文中,我们将探讨每个问题的答案!

    什么是Web组件? (What Are Web Components?)

    Essentially, they are a W3 specification that enables you to build your own HTML elements. If you literally don’t know anything about them it may be worth having a quick read up about them as some of the terms I use in the article require a basic understanding.

    本质上,它们是W3规范,使您能够构建自己HTML元素。 如果您对它们一无所知,那么值得快速阅读一下,因为我在本文中使用的某些术语需要基本的理解。

    我为什么要使用它们? (Why Would I Want To Use Them?)

    A good example of when you might want to use Web Components would be when you are building UI that doesn’t exist natively in the browser — elements such as color pickers, carousels, accordions or typeaheads. Alternatively, you are likely to have some components that you use all the time across various sites that you are sick of rebuilding every time. These are things like social buttons, subscribe forms or notifications. With Web Components you can bundle up your markup, styles and scripts into encapsulated modules using HTML tags like <color-picker></color-picker> to reference them. This will seem familiar if you have used Angular directives or React components but the benefit here is that it is native to the browser and framework agnostic.

    当您要构建浏览器本身不存在的UI时(例如颜色选择器,轮播,手风琴或预先键入),可以使用Web组件作为一个很好的例子。 另外,您很可能会在各个站点上经常使用某些组件,而您每次都想重建它们。 这些是社交按钮,订阅表单或通知之类的东西。 借助Web组件,您可以使用HTML标签(例如<color-picker></color-picker>将标记,样式和脚本捆绑到封装的模块中,以引用它们。 如果您使用过Angular指令或React组件,这似乎很熟悉,但是这样做的好处是,它对于浏览器和框架无关。

    Web Components enable you to build pieces of UI once and use them everywhere. This is ideal for projects like a living styleguide where you want to build a library with a single source of truth for each of your components. This approach means repeating less code and having portable components that you or your team can simply drop references to into your interface.

    Web组件使您可以一次构建UI并将其在任何地方使用。 对于像生活风格指南这样的项目,它是一个理想的项目,在该项目中,您想为每个组件的单个事实来源建立一个库。 这种方法意味着减少重复的代码,并拥有可移植的组件,您或您的团队可以简单地将引用插入到您的界面中。

    Another big advantage of using Web Components is the ability to package these components up and share them with other developers or website owners. Essentially, the consumer can put an import statement in their web page such as:

    使用Web组件的另一个主要优点是能够打包这些组件并将其与其他开发人员或网站所有者共享。 从本质上讲,消费者可以在其网页上放置一个导入语句,例如:

    <link rel="import"
          href="http://url.com/subscribe-form.html">

    Then use the custom element tag you’ve defined in that component. With this imported into their webpage, they can have as many instances of the custom component on their page as they wish. In the subscribe form example, we could use the tag <subscribe-form></subscribe-form> in multiple locations on the page. Of course, if you are doing this, you need to ensure that the beautiful component you have crafted is extremely flexible and will work across a range of devices and screen sizes.

    然后使用您在该组件中定义的自定义元素标签。 将其导入到他们的网页后,他们可以在其页面上根据需要拥有任意数量的自定义组件实例。 在订阅表单示例中,我们可以在页面上的多个位置使用标签<subscribe-form></subscribe-form> 。 当然,如果要这样做,则需要确保精心制作的精美组件非常灵活,并且可以在各种设备和屏幕尺寸上使用。

    将这些坏男孩变成响应式Web组件 (Turning These Bad Boys Into Responsive Web Components)

    I feel the best way to demonstrate is by example, so I’ll continue with the subscribe form which is a common piece of UI that doesn’t change much between different sites and implementations.

    我觉得最好的演示方法是通过示例,所以我将继续使用订阅表单,这是一种常见的UI,在不同的站点和实现之间不会有太大变化。

    Here’s one I made earlier:

    这是我之前做的:

    Screenshot of email subscription form, two input fields one for name and one for email, side by side

    Inside my Web Component template I have some basic markup for the form.

    在我的Web组件模板中,我有一些基本的表单标记。

    <ul class="form"> 
      <li class="form__item">
        <label for="name">Name:</label>
        <input id="name" name="name" type="text">
      </li>
      <li class="form__item">
        <label for="name">Email:</label>
        <input id="name" name="name" type="text">
      </li>
    </ul>

    My markup and CSS are tucked away inside my component making use of the Shadow DOM part of the specification. This gives me encapsulation, allowing me to use label and input selectors freely in my code without worry of other styles bleeding in or mine bleeding out into the parent site.

    利用规范的Shadow DOM部分,我的标记和CSS被隐藏在组件内部。 这给了我封装性,使我可以在代码中自由使用labelinput选择器,而不必担心其他样式渗入或渗入父站点。

    For clarity and brevity, I’m not going to write out the styles other than ones used for layout. I’ve used a combination of float: left and display: table to achieve this layout to prevent breaking in any widths.

    为了清楚和简洁起见,我将不写除用于布局的样式以外的其他样式。 我使用了float: leftdisplay: table来实现此布局,以防止以任何宽度折断。

    .form__item {
      display: table;
      float: left;
      width: 50%;  
    }
    
    label {
      display: table-cell;
      width: auto;
    }
    
    input {
      display: table-cell;
      width: 100%;
    }

    I’ll be using HTML imports to pull it into the SitePoint site as a demonstration:

    我将使用HTML导入将其拉入SitePoint网站作为演示:

    Screenshot of email subscription form imported into main body of SitePoint site

    Now we’re all set up, let’s look at some responsive techniques.

    现在我们都完成了,让我们看一些响应技术。

    媒体查询 (Media Queries)

    The classic approach that we know and love is still alive and well inside Responsive Web Components. These can be applied inside your template when you code your component if you want to bake in some breakpoints, or you can apply a hook (for example, by using a class) to the container if you want to leave that decision to your consumer. In this case, all we need to do is strip the floats and adjust them to be full width.

    在响应式Web组件中,我们知道和喜欢的经典方法仍然有效。 如果您要在某些断点处进行烘焙,则可以在对组件进行编码时将其应用于模板中,或者,如果您要将该决定留给使用者,则可以对容器应用一个钩子(例如,通过使用类)。 在这种情况下,我们要做的就是去除浮子并将其调整为全宽。

    @media (max-width: 30em) {
      .form__item {
        float: none;
        width: 100%;
      }
    }
    Screenshot of email subscription form below 30em, form fields are now stacked instead of inline

    However, media queries aren’t going to be enough to save us this time.

    但是,媒体查询不足以挽救我们这次的时间。

    I’m happy with my sign up form styles and it works fine in the body, but what happens when the website author wants to chuck it into their sidebar? Suddenly my form looks squashed and isn’t really usable.

    我对我的注册表单样式感到满意,并且可以很好地工作,但是当网站作者希望将其插入到侧边栏时会怎样? 突然,我的表单看起来很紧缩,并没有真正可用。

    Screenshot of email subscription form, squashed up in the Sitepoint website sidebar

    This is because the component is not aware of its boundaries – it has no context.

    这是因为该组件不知道其边界-它没有上下文。

    The whole point of Web Components is you can drop them anywhere and they’ll just work right? So obviously this won’t do, but there are a few techniques you can use to ensure your components are responsive and contextual.

    Web组件的全部要点是您可以将它们放到任何地方,它们会正常工作吗? 因此显然这是行不通的,但是您可以使用一些技术来确保您的组件具有响应能力和上下文相关性。

    Flexbox欺骗 (Flexbox Trickery)

    If you’re looking at using Web Components, odds are you’re only supporting modern browsers and not worrying about IE9, in which case, a bit of Flexbox magic might be perfect for you to turn these into Responsive Web Components. This is my preferred approach as it doesn’t require any additional JavaScript.

    如果您正在使用Web组件,很可能只支持现代浏览器,而不必担心IE9,在这种情况下,一些Flexbox魔术可能非常适合您将它们变成响应式Web组件。 这是我的首选方法,因为它不需要任何其他JavaScript。

    Once again, the code sample here is purely showing the layout styles I’ve used:

    再次,这里的代码示例纯粹显示了我使用的布局样式:

    .form {
      display: flex;
      flex-wrap: wrap;
    }
    
    .form__item {
      align-items: center;   
      display: flex;
      flex: 1 0 320px;
      flex-wrap: wrap;
      max-width: 100%;
    }       
    
    label {
      flex: 1 0 90px;
    }
    
    input {
      flex: 1 0 230px;
      width: 100%;
    }

    By setting the container to display: flex; flex-wrap: wrap, the .form__item elements will appear side-by-side, but we still need to make a few adjustments so that when the container gets too small they will stack nicely.

    通过将容器设置为display: flex; flex-wrap: wrap display: flex; flex-wrap: wrap.form__item元素将并排显示,但是我们仍然需要进行一些调整,以便当容器变得太小时,它们可以很好地堆叠。

    Inside the .form__item, I’ve used the flex shorthand of flex: 1 0 320px; which translates in flex terms to — grow of one, flex shrink of zero, and flex basis of 320 pixels. Having flex-wrap set to wrap means it won’t be any smaller than the basis we set (320px) but setting it to flex means it will take up the rest of the available space.

    .form__item内部,我使用了flex的flex缩写flex: 1 0 320px; 以flex的术语表示为-增长1,flex缩小为0,flex基础为320像素。 将flex-wrap设置为wrap意味着它不会小于我们设置的基础(320像素),但是将其设置为flex意味着它将占用剩余的可用空间。

    I have given a similar treatment to the label and input elements. Their combined flex values total 320, which means they will behave as desired at smaller container sizes.

    我对labelinput元素进行了类似的处理。 它们的组合弯曲值总计为320,这意味着它们在较小的容器尺寸下将表现出所需的性能。

    With these adjustments in place, let’s take a look at that same form in SitePoint’s sidebar:

    完成这些调整后,让我们看一下SitePoint侧栏中的相同表格:

    Screenshot of email subscription form, sitting nicely in the sidebar with form elements stacked using Responsive Web Components

    Much better! However, there is more than one way to skin a cat.

    好多了! 但是,有多种方法可以给猫皮化。

    元素查询 (Element Queries)

    The idea of element queries is that you are able to emulate media query type functionality but at a component level — very handy for Responsive Web Components. Essentially, imagine being able to write something like this in your CSS:

    元素查询的想法是,您可以在组件级别上模拟媒体查询类型的功能-对于响应式Web组件非常方便。 本质上,想象一下能够在CSS中编写如下代码:

    .form__item[max-width~="30em"] {
      /* Styles here */
    }

    With element queries that is exactly what we can do. Pretty powerful right?

    使用元素查询正是我们可以做的。 很强大吧?

    Unfortunately, this technique isn’t available natively due to browser vendors being concerned with the potential to cause infinite loops. However, some smart people have written plugins to enable this functionality.

    不幸的是,由于浏览器供应商担心引起无限循环的可能性,因此无法自然使用该技术。 但是,一些聪明人编写了插件来启用此功能。

    In my example, I have used CSS Element Queries by Marc J Schmidt which is a really nice implementation. There are also the following similar projects:

    在我的示例中,我使用了Marc J Schmidt的 CSS元素查询 ,这是一个非常不错的实现。 也有以下类似的项目:

    Essentially what they do is use JavaScript to detect the width of the component and modify an attribute so that you are able to style it in CSS. Some are event driven and some based on resize.

    本质上,他们所做的是使用JavaScript检测组件的宽度并修改属性,以便您可以在CSS中对其进行样式设置。 有些是事件驱动的,有些则基于调整大小。

    .form__item[max-width~="30em"] {
      float: none;
      width: 100%;
    }

    With the combination of one of these plugins and a small code snippet similar to the above we are able to get the exact same result as the flexbox implementation in the sidebar.

    通过将这些插件之一和类似于上面的一小段代码相结合,我们可以在边栏中获得与flexbox实现完全相同的结果。

    属性 (Attributes)

    One of the cool things we can offer to consumers of our Responsive Web Components is an API via attributes. For example, you could set up a attribute called layout and have sizes of “small” and “large”. Our consumer of the component could then use it as follows:

    我们可以为响应式Web组件的消费者提供的很酷的功能之一就是通过属性的API。 例如,您可以设置一个名为layout的属性,其大小分别为“小”和“大”。 然后,我们的组件使用者可以按以下方式使用它:

    <subscribe-form layout="small"></subscribe-form>

    This would trigger the styles for the small implementation.

    这将触发小型实现的样式。

    In the Shadow DOM, the containing element is known as the :host. An example could look like so:

    在Shadow DOM中,包含元素称为:host 。 一个示例如下所示:

    :host { 
      display: block; 
    } 
    
    :host([layout = "small"]) .form__item { 
      float: none;
      width: 100%;
    } 
    
    :host([layout = "large"]) .form__item { 
      display: table;
      float: left;
      width: 50%;   
    }

    This would then allow the component consumer to write some simple JavaScript to flip between the different sizes that you’ve provided them. This means instead of loading additional JavaScript inside of your module, you can leave it up to the consumer to decide how they want to hook into it. This allows your component to become more future proof.

    然后,这将允许组件使用者编写一些简单JavaScript,以在您提供的不同大小之间切换。 这意味着您无需将其他JavaScript加载到模块中,而应由使用者自行决定如何挂钩。 这使您的组件变得更适合将来使用。

    自己尝试! (Try It Yourself!)

    If you’re interested in seeing the flexbox version I refer to in this demo in action on your own machine, you can do the following in Chrome:

    如果您有兴趣在自己的计算机上查看本演示中提到的flexbox版本,可以在Chrome中执行以下操作:

    1. Install the CORS Chrome extension and turn it on. This is to allow HTML Imports to work from external sites.

      安装CORS Chrome扩展程序并将其打开。 这是为了允许HTML导入从外部站点进行。

    2. Either refresh this page or open any website in a new tab or window so the extension kicks in.

      刷新此页面或在新标签页或窗口中打开任何网站,以便扩展程序启动。
    3. In Chrome developer tools, add this inside the <head> tag:

      在Chrome开发人员工具中,将此添加到<head>标记内:

      <link rel="import" href="http://wsh.webfactional.com/web_components/components/
        cm-subscribe-form--flex.html">
    4. Finally, add:

      最后,添加:

      <cm-subscribe-form-flex></cm-subscribe-form-flex>

      somewhere inside the <body> and you should see my subscribe form auto-magically pulled through. Enjoy!

      <body>内的某个位置,您应该会看到我的订阅表单自动神奇地通过。 请享用!

    结论 (Conclusion)

    The approaches above can actually be used for any UI development but they lend themselves particularly well to Responsive Web Components due to their reusable and shareable nature.

    上面的方法实际上可以用于任何UI开发,但是由于它们具有可重用和可共享的特性,因此特别适合于响应式Web组件。

    If you haven’t checked out Web Components yet I would strongly encourage you to do so. While the full spec is currently only available natively in Chrome and Opera, the other browser vendors aren’t far behind.

    如果您尚未签出Web组件,我强烈建议您这样做。 虽然完整规范目前仅在Chrome和Opera中本地提供,但其他浏览器供应商也不甘落后

    If you’re interesting in learning more about Responsive Web Design, check out our new book, Jump Start Responsive Web Design, written by Chris Ward.

    如果您有兴趣学习有关响应式Web设计的更多信息,请查看克里斯·沃德(Chris Ward)撰写的新书《快速入门响应式Web设计》

    翻译自: https://www.sitepoint.com/responsive-web-components/

    vue 响应式布局组件

    展开全文
  • 对于自建vue框架响应式布局

    千次阅读 2019-05-31 17:36:05
    1. 首先在data(){ }中,定义一个浏览器当前宽度的变量,并初始化当前加载出来的浏览器的宽度, data(){ return{ screenWidth:document.body.clientWidth, ...然后用watch去监听screenWidth值的改变, ...

    1. 首先在data(){ }中,定义一个浏览器当前宽度的变量,并初始化当前加载出来的浏览器的宽度,

    data(){

    return{
    screenWidth:document.body.clientWidth,
    }

    }

    然后用watch去监听screenWidth值的改变,

    watch:{
        screenWidth(val){
            this.screenWidth = val
            let self = this
            if (this.screenWidth<=767) {
                 self.peen = false
                self.seen = true
            }else{
               self.peen = true
                self.seen = false
            }
        }
    }

    那请问值怎么改变呢?当然是用mounted去实时监测浏览器宽度的变换去改变screenWidth的值

    mounted () {
        const that = this
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth
                that.screenWidth = window.screenWidth
            })()
        }
    }

    然后就是在html代码中用v-show去控制true  or  false

    methods:{
        ResponsiveMenu () {
           if(this.showitem===false){
               this.showitem=true
           }else if(this.showitem===true){
               this.showitem=false
           }
        }
    },

     

     

    展开全文
  • 基于vue响应式ui框架 Framevuerk (Framevuerk) Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js. 快速,响应式,多语言,方向支持和基于Vue.js的可...

    基于vue的响应式ui框架

    Framevuerk (Framevuerk)

    Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.

    快速,响应式,多语言,方向支持和基于Vue.js的可配置UI框架。

    建立 (Setup)

    First at all, you should install Framevuerk and of course Vue from terminal.

    首先,您应该从终端安装Framevuerk ,当然还要安装Vue

    npm install vue --save
    npm install framevuerk --save

    You can also install these, just if you want active touch actions support, fvDatepicker jalaali dates supoort and icons.

    您也可以安装这些,就算需要主动触摸操作支持,也可以安装fvDatepicker jalaali fvDatepicker supoort和图标。

    npm install idate --save
    npm install hammerjs --save
    npm install font-awesome --save

    And just follow the example and use it! (commonjs syntax and require also available)

    并按照示例进行操作即可! ( commonjs语法和require也可用)

    // Vue package
    import Vue from 'vue'
    
    // Framevuerk main js file
    import Framevuerk from 'framevuerk/dist/framevuerk.js'
    
    // If you handle styles with webpack, import this. Else you can include this via <link rel="stylesheet">
    import 'framevuerk/dist/framevuerk.css'
    
    // IDate package, just if you want globally support jalaali dates for fvDatepicker
    import IDate from 'idate'
    Framevuerk.use('date', IDate)
    
    // Hammer package, just if you want active touch actions support
    import Hammer from 'hammerjs'
    Framevuerk.use('hammer', Hammer)
    
    // Font-Awesome icons, just if you want active icons
    // If you handle styles with webpack, import this. Else you can include this via <link rel="stylesheet">
    import 'font-awesome/css/font-awesome.css'
    
    // Active Framevuerk...
    Vue.use(Framevuerk)
    
    // And finally, Initializing app
    const app = new Vue({
      el: "#app"
    });"

    Finally you need to create your template just like this.

    最后,您需要像这样创建模板。

    <html>
      <head>
        <link rel="stylesheet" href="path/to/your/app.css"/>
      </head>
      <body>
        <fv-main id="app">
          <!-- Your Content -->
        </fv-main>
        <script src="path/to/your/app.js"></script>
      </body>
    </html>

    定制 (Customize)

    Framevuerk can have different language, direction, and colors based on the user's taste. To setup your custom version, create a file called .framevuerkrc.js in root of your project and put these on:

    Framevuerk可以根据用户的口味使用不同的语言,方向和颜色。 要设置您的自定义版本, .framevuerkrc.js在项目的根目录中创建一个名为.framevuerkrc.js的文件,并将其放在以下位置:

    module.export = {
      // config name
      'config-name': 'foobar',
    
      // your locale and direction.
      locale: 'en', // or 'fa'
      direction: 'ltr', // or 'rtl'
    
      // theme colors:
      'primary-color': '#41b883',
      'secondary-color': '#35485d',
      'danger-color': '#dd4b39',
      'warning-color': '#ef8f00',
      'info-color': '#14b0cf',
      'bg-color': '#f9f9f9',
    
      // base padding size
      padding: '15px',
    
      // base animation speed
      'transition-speed': '0.35s',
    
      // base border radius applied to buttons, inputs and etc.
      'border-radius': '4px',
    
      // base shadow size applied to header, footer, form elements and etc.
      'shadow-size': '3px'
    }

    And output files goes to ./node_modules/framevuerk/dist directory:

    输出文件进入./node_modules/framevuerk/dist目录:

    • framevuerk-foobar.js

      framevuerk-foobar.js

    • framevuerk-foobar.css

      framevuerk-foobar.css

    • framevuerk-foobar.min.js

      framevuerk-foobar.min.js

    • framevuerk-foobar.min.css

      framevuerk-foobar.min.css

    You can also use .framevuerkrc.json, .framevuerkrc or framevuerk key inside your package.json to pass this variables to Framevuerk!

    您还可以在package.json使用.framevuerkrc.json.framevuerkrcframevuerk键,以将此变量传递给Framevuerk!

    Framevuerk apply these config by this cli command:

    Framevuerk通过此cli命令应用以下配置:

    ./node_modules/.bin/framevuerk
    # or on npm scripts, just:
    framevuerk

    翻译自: https://vuejsexamples.com/responsive-and-configurable-ui-framework-based-on-vue-js/

    基于vue的响应式ui框架

    展开全文
  • ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,学过响应式布局的一定知道页面的响应式设计都是通过css来实现的,但是在vue中,是否还可以通过编写css代码来实现呢? 回答: 可以,而且非常简单和...
  • amaze-vue —— 基于Vue.js和amazeui样式的响应式UI框架
  • Vue实战篇十:响应式布局

    千次阅读 2020-11-06 14:36:35
    Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:Vue的指令 Vue基础篇六:Vue使用JSX进行动态渲染 ...
  • 1.vue-cli3.0中使用iview 链接: Vue-cli3.0中使用iview. 1.在控制台启动vue ui 2.在vue ui中搜索并安装iview 或者直接在控制台输入 cnpm install iview 3.安装好后重启项目 4.在main.js中引入 import iview from '...
  • WEB响应式布局实战项目

    千人学习 2018-12-14 15:34:56
    1.前端WEB响应式布局实战-搭建项目 2.前端WEB响应式布局实战-响应式头部 3.端WEB响应式布局实战-banner&footer 4.端WEB响应式布局实战-service部分 5.前端WEB响应式布局实战-team部分 8.前端WEB响应式布局实战-...
  • 说来惭愧,响应式布局我一直知道,也写过,但是你懂得,肯定都是套框架居多(大神等无视),,Bootstrap, 其余的针对vue的element-ui,react中的 ant-design,哈哈,基本都大同小异,虽然我响应式布局弄得很少倒是真...
  • 14个响应式前端开发框架。几乎所有的框架都采用了响应式网格系统。  使用这些前端框架,有如下好处:  跨浏览器。这一点已被证实。  一致性。UI组件,如导航、按钮、标签、表单、下拉框、表格……,在设计上保持...
  • 包括:Vue的生命周期、Vue的数据响应、Vue的渲染流程等等,在这一章节我们会和大家一起去实现一个响应式框架 – MVue,MVue 会遵循Vue的代码逻辑和实现思路,我们希望能够借助MVue来让大家更好的理解整个Vue的核心...
  • 响应式布局?响应式编程? 从字面意思可以看出,具有“响应式”特征的事物会根据条件变化,使得目标自动作出对应变化。比如在“响应式布局”中,页面根据不同设备尺寸自动显示不同样式。 Vue.js 中的响应式也是一样...
  • 前端框架应轻巧且易于使用 。 Bootstrap是最受欢迎的,尽管它也是最重的之一。... 整个框架是移动响应的,并且可以适合您需要的任何布局。 但是,目标是使该库保持纤薄,为您的工作提供基本的要...
  • 折腾响应式布局设计

    2017-03-06 14:13:56
    而且还是在bootstrap框架上折腾的,所以对于响应式布局呢?咱们可以忽略了吗?当然是不行的。 响应式布局概念 Responsive design,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站...
  • 响应式布局和自适应

    2021-06-13 19:06:26
    响应式布局和自适应 写网页时,经常要求要适配不同屏幕,要求可以在大屏幕,ipad,手机上可以显示正常。对于公司的官网这是很重要的。那么,这就涉及到了响应式布局和自适应。 文章目录响应式布局和自适应前言一、...
  • @media与响应式布局

    2017-03-27 21:22:17
    前言:随着人们对手机、iPad等的依赖,网页移动端也越来越受到重视,这就要求开发人员对响应式布局有一定的造诣,典型的移动端优先框架Bootstrap/Foundation等给开发者提供了快速建站的基础工具,在建站中宽度可以...
  • 最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局框架。学习的时候参考了http://blog.csdn.net/shoyer/article/details/829301...
  • 很多人经常会对响应式布局和自适应式布局产生混淆,今天将为大家介绍这两者到底表示的是什么以及它们之间的区别。具有一定的参考作用,希望对大家有所帮助。 一:什么是响应式布局和自适应式布局 1.什么是响应式...
  • 响应式布局

    2019-05-13 17:50:09
    框架及介绍 bootstrap的栅格布局 优缺点 优点:解决设备之间的差异和展示 缺点:代码多、工作量大、加载速度受影响 对原有网络布局产生影响,用户判断未必准确 设计原则 移动优先:设计之初就要考虑页面...
  •   EuiAdmin是基于element-ui的vue快速开发后台管理框架,EuiAdmin是一个响应式的后台管理框架,通过监听窗口窗口大小变化和设备的类型,调整视图框架支持响应式。在EuiAdmin的富文本编辑器、ec
  • iView的响应式布局

    2018-10-22 05:46:23
    由于在文档中并没有找到这部分的说明,但是就以往的经验分析,一个UI框架是一定有响应式布局的功能的,所以就结合以往的经验加上查阅部分资料,摸索出了响应式布局的写法。 iView支持xs,sm,md,lg四种尺寸 &lt...
  • (只能参考,不完整)Vue框架 获取GitHub 上的 issues , 配合GitHub Pages 搭建个人博客站点,html5 响应式个人博客模板资源下载此资源下载价格为4D币,请先登录资源文件列表codedown123-0806-01/index.html,927code...
  • 项目介绍 菲菲博客是一个前后端分离的博客系统,前后端全是由本人独立完成 前端因能力有限,一边学习viewUI,一边做的,故前端可能...前台使用 Vue + View UI,响应式布局,适配手机+电脑+平板,不同角色登录展示不同
  • 安装Element UI框架: 1、在项目中执行下列代码:npm install element-ui --save-dev 2、在src\main.js文件中引入: import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; Vue....
  • vue bootstrap Vue网格响应式 (Vue Grid Responsive) Responsive grid system based on Bootstrap for Vue. 基于Bootstrap for Vue的响应网格系统。 View Demo 查看演示 Download Source 下载源 安装 ...
  • 前端响应式布局原理与方案(详细版)
  • VUE.JS学习笔记 文章目录第一章 vue简介...数据响应式d.双向数据绑定***MVVM设计思想e. 事件绑定f. 属性绑定g. 样式绑定1.class样式处理2.样式绑定相关语法细节3.style样式处理h. 分支循环结构1.分支结构2. 循环结构1.3
  • 原文:静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别 静态布局(Static Layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点:不管浏览器尺寸具体是多少,网页...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,699
精华内容 2,679
关键字:

vue的响应式布局框架

vue 订阅