精华内容
下载资源
问答
  • vue 自定义布局 Vue扩展布局 (vue-extend-layout) Extend the default layout or create custom layouts for your SPA Vue.js 扩展SPA Vue.js的默认布局或创建自定义布局 View demo 查看演示 Download Source ...

    vue 自定义布局

    Vue扩展布局 (vue-extend-layout)

    Extend the default layout or create custom layouts for your SPA Vue.js

    扩展SPA Vue.js的默认布局或创建自定义布局

    模板vue-cli (Template vue-cli)

    If you are going to use layouts in your application, you can choose to use a pre-configured template using vue-cli.

    如果要在应用程序中使用布局,则可以选择使用通过vue-cli预先配置的模板。

    • ktquez/layout: A full-featured Webpack + Extend layout + vue-loader setup with hot reload, linting, testing & css extraction

      ktquez / layout :功能齐全的Webpack +扩展布局+ vue-loader设置,具有热重载,整理,测试和CSS提取功能

    • ktquez/layout-simple: A simple Webpack + Extend layout + + vue-loader setup for quick prototyping

      ktquez / layout-simple :简单的Webpack +扩展布局+ + vue-loader设置,可快速进行原型制作

    用法 (Usage)

    NPM

    NPM

    npm install vue-extend-layout --save

    In your src/main.js:

    在你的src/main.js

    import Vue from 'vue'
    import router from './router'
    import { VueExtendLayout, layout } from 'vue-extend-layout'
    
    Vue.config.productionTip = false
    Vue.use(VueExtendLayout)
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      ...layout // Add methods to extend layouts
    })

    Attention: From now on, App.vue will no longer be your primary file

    注意:从现在开始, App.vue将不再是您的主文件

    创建和使用布局 (Create and Using layouts)

    You need to create the src/layouts/default.vue layout because it will be the main file of your application.

    您需要创建src/layouts/default.vue布局,因为它将是您应用程序的主文件。

    • Create a directory called layouts/ inside the main directory of your application, usually it will be from src/layouts/

      在应用程序的主目录内创建一个名为layouts/的目录,通常是从src/layouts/

    • Inside the layout directory create a layout called default.vue

      在布局目录中,创建一个名为default.vue的布局

    For example:

    例如:

    <template>
      <div id="app">
        <header />
        <sidebar />
        <div class="container">
          <router-view />
        </div>
        <footer />
      </div>
    </template>
    
    <script>
      export default {
        name: 'default' // id of the layout (required)
      }
    </script>
    
    <style>
    /* your style */
    </style>

    Note: The name you give to the layout component (name: 'default') will be the key to selecting the layouts in your application.

    注意:您给布局组件指定的name: 'default' ( name: 'default' )将是在应用程序中选择布局的关键。

    At this point, you can check the default layout working, just run the npm run dev command and all the routes (pages) will load inside the default layout.

    此时,您可以检查默认布局是否正常运行,只需运行npm run dev命令,所有路由(页面)就会加载到默认布局中。

    --

    -

    自定义扩展布局 (Custom extend layout)

    To create a layout you just need to create a component within the layouts directory and name that component.

    要创建布局,您只需要在layouts目录中创建一个组件并命名该组件。

    For example: layouts/MyCustomLayoutLogin.vue

    例如: layouts/MyCustomLayoutLogin.vue

    <template>
      <div>
        <header-login />
        <div class="container-login">
          <router-view />
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'MyCustomLayoutLogin' // id of the layout
      }
    </script>
    
    <style>
    /* your style */
    </style>

    And to extend this layout in any the desired route, simply include the property layout: MyCustomLayoutLogin in meta object of the route.

    并要在任何所需的路由中扩展此布局,只需在路由的元对象中包括属性layout: MyCustomLayoutLogin

    {
      path: '/login',
      name: 'Login',
      component: () => import('@/pages/Login'),
      meta: {
        layout: 'MyCustomLayoutLogin' // name of the layout
      }
    }

    Attention: The value of the layout property must be the same as the name of the MyCustomLayoutLogin component.

    注意: layout属性的值必须与MyCustomLayoutLogin组件的名称相同。

    创建错误布局(可选) (Create a error layout (Optional))

    For example: layouts/error.vue

    例如: layouts/error.vue

    <template>
      <div>
        <h1>PAGE NOT FOUND</h1>
        <router-view /> <!-- Optional -->
      </div>
    </template>
    
    <script>
      export default {
        name: 'error' // id of the layout
      }
    </script>
    
    <style>
    /* your style */
    </style>

    And in the route add in the 'meta' object the 'layout' property with the name of the layout component, in this case 'error'.

    然后在路线中的“元”对象中添加“ layout”属性和布局组件的名称,在本例中为“错误”。

    {
      path: '*',
      name: 'Error',
      // component: () => import('@/pages/Error') (Optional)
      meta: {
        layout: 'error' // name of the layout
      }
    }

    Webpack (Webpack)

    In your webpack file check for an alias (@) to the main directory of your application, typically.

    通常,在Webpack文件中,检查应用程序主目录的别名(@)。

    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
      }
    }

    The 'vue-extend-layout' uses this alias (@), if it does not have or the main path is another, add that alias (@) to the path that contains the 'layouts' directory you created.

    'vue-extend-layout'使用此别名(@),如果没有别名或主路径是另一个别名,则将该别名(@)添加到包含您创建的'layouts'目录的路径中。

    文章和截屏 (Articles and Screencast)

    • In development

      开发中

    翻译自: https://vuejsexamples.com/extend-the-default-layout-or-create-custom-layouts-for-your-spa-vue-js/

    vue 自定义布局

    展开全文
  • Toast自定义布局

    2017-07-05 13:42:50
    Toast自定义布局实现炫酷效果
  • Delphi TDBGrid自定义布局,可以按用户保存列顺序等。
  • CustomCollectionViewLayoutDemo 自定义布局
  • 主要介绍了IOS封装自定义布局的方法,需要的朋友可以参考下
  • 主要介绍了Android编程实现Toast自定义布局的方法,结合简单实例形式分析了Toast自定义布局的实现步骤与相关操作技巧,需要的朋友可以参考下
  • 前言 在我们的实际应用中, 经常需要用到...但这实在是太麻烦了,所以网上有个 FloatingActionButtonMenu 这个开源库,这就是利用到了自定义布局 「ViewGroup」,现在就让我给他家介绍下,如何自定义布局 「layout
  • 自定义布局,提高代码效率
  • Android ActionBar自定义布局
  • android自定义布局

    2016-03-08 20:26:42
    很早之前实现了一个很简单的自定义布局,即继承自现有的布局,来实现自己功能的一些扩展,虽然比较简单,但是也很具有代表性,所以就记录下来吧 先看下效果吧: 可以看到,这个效果类似于注册登录的文本框,只...

    很早之前实现了一个很简单的自定义布局,即继承自现有的布局,来实现自己功能的一些扩展,虽然比较简单,但是也很具有代表性,所以就记录下来吧

    先看下效果吧:
    这里写图片描述
    可以看到,这个效果类似于注册登录的文本框,只不过这里我使用了一个布局将多个android提供的原生控件封装起来了

    自定义布局的步骤:

    • 编写自定义布局的布局文件
    • 继承自现有的布局,或者ViewGroup
    • 在xml中使用该布局

    编写布局文件

    activity_zuhe.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clipToPadding="true"
        android:fitsSystemWindows="true" >
    
        <EditText
            android:id="@+id/edittext"
            android:layout_width="fill_parent"
            android:layout_height="80px"
            android:background="#009959"
            android:singleLine="true" />
    
        <TextView
            android:id="@+id/textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@+id/edittext"
            android:background="#00000000"
            android:clickable="true"
            android:layout_centerVertical="true"
            android:text="删除"
            android:textColor="#ff0000"
            android:visibility="gone" />
    
    </RelativeLayout>

    继承自现有布局或ViewGroup

    public class CancelEdit extends LinearLayout implements EditInterface{
        // 文本框
        EditText mEditText = null;
        // 删除提示
        TextView mTextView = null;
    
        public CancelEdit(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            LayoutInflater layoutInflater = LayoutInflater.from(context);
            layoutInflater.inflate(R.layout.activity_zuhe,this,true);
            mEditText = (EditText) findViewById(R.id.edittext);
            mTextView = (TextView) findViewById(R.id.textview);
    
            mEditText.addTextChangedListener(new TextWatcher() {
    
                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {
    
                }
    
                @Override
                public void beforeTextChanged(CharSequence s, int start, int count,
                        int after) {
    
                }
    
                @Override
                public void afterTextChanged(Editable s) {
                    // 根据当前的内容是否==""来决定是否显示删除文字
                    if (s != null && s.length() == 0) {
                        hiddenCancel();
                    } else {
                        showCancel();
                    }
                }
            });
    
            mTextView.setOnClickListener(new OnClickListener() {
    
                @Override
                public void onClick(View v) {
                    mEditText.setText("");
                }
            });
    
        }
    
        public CancelEdit(Context context, AttributeSet attrs) {
            this(context, attrs,0);
        }
    
        public CancelEdit(Context context) {
            this(context,null);
        }
    
        @Override
        public void hiddenCancel() {
            mTextView.setVisibility(View.GONE);
        }
    
        @Override
        public void showCancel() {
            mTextView.setVisibility(View.VISIBLE);
        }
    
    }
    
    // 自己定义接口,用来控制显示和隐藏当前删除按钮
    interface EditInterface {
        public void hiddenCancel();
        public void showCancel();
    }
    

    在xml中使用该布局

    <com.example.zuhe.CancelEdit
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#009959"
            android:clipToPadding="true"
            android:fitsSystemWindows="true" />

    ok,代码比较简单,可以看到现在已经实现了一个基本的自定义layout,虽然比较简单,也米有什么太多的技术含量,但是很有代表性,故作此记录。

    展开全文
  • 在我们开始构建自定义布局前,先考虑一下是否必要这样做。 UICollectionViewFlowLayout类已经提供了一系列的显着特性,优化了效率,可以采用不同的方式实现不同类型的标准布局。只有在以下情况下才使用自定义布局: ...
  • 本文实例讲述了Android不使用自定义布局情况下实现自定义通知栏图标的方法。分享给大家供大家参考,具体如下: 自定义通知栏图标?不是很简单么。自定义布局都不在话下! 是的,有xml布局文件当然一切都很简单,如果...
  • 居中,自定义布局小点整理
  • BubbleCollectionViewLayout:使用自定义布局创建UICollectionView的气泡布局
  • 自定义布局和显示时间的Toast
  • 主要介绍了WPF的ListView控件自定义布局的方法,结合实例形式分析了WPF中ListView控件的布局方法,需要的朋友可以参考下
  • 作者Andrew554,源码Grallery,使用UICollectionView空间,自定义布局实现画廊多样化.
  • 自定义布局实现仿qq侧滑部分Android代码,供大家参考,具体内容如下 源码DEMO地址:https://github.com/applelili/ImitationQQ 实现说明: 通过自定义布局实现: SlidingLayout继承于 HorizontalScrollView /** *...
  • 动态生成DIV 选中两块DIV 鼠标右键合并 自定义布局
  • 自定义布局(wpf)

    2014-10-13 10:06:59
    wpf设计的,可自定义布局,进行随意拖放,支持布局的保存与加载
  • 这个demo主要介绍了自定义布局技术,并实现了验证码的效果,希望可以帮助需要的同学.
  • 主要介绍了IOS实现自定义布局瀑布流,画面感非常炫丽,想要学习的朋友不要错过本
  • 集合视图简单自定义布局,了解集合视图自定义布局流程
  • collection控件用来实现界面的各种自定义布局,最常用其作为横向、竖向的布局控件。很早之前,系统对于collection的支持并不是很好。所以自己实现了支持自定义布局、自定义cell的collection控件。自定义的collection...
  • 自定义布局通知栏

    2015-09-14 11:36:30
    android自定义布局通知栏,通过通知栏按钮跳转到特定的activity
  • Delphi界面自定义布局

    热门讨论 2011-09-02 15:23:17
    界面自定义布局 可调整控件大小、位置等信息
  • 杂志视图 一个 UICollectionView 自定义布局
  • Android 自定义布局竖向的ViewPager的实现 效果图: 这个自定义控件涉及到的知识点: 自定义ViewGroup中onMeasure和onLayout的写法 弹性滚动Scroller的用法 速度轨迹追踪器VelocityTracker的用法 如何处理滑动...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 317,643
精华内容 127,057
关键字:

自定义布局