062021-9

el-date-picker时间插件获取值格式问题

最近在使用vue el-date-picker时间控件，发现直接获取的时间是日期格式，而我需要的格式是

yyyy-MM-dd HH:mm

那么如何转换时间控件格式呢

<el-date-picker 
v-model="selectDatetime"
 type="datetime" placeholder="选择时间"
 @change="dataSearch" value-format="yyyy-MM-dd HH:mm" 
format="yyyy-MM-dd HH:mm"> </el-date-picker>

在日期控件中，加入上述加粗格式即可

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
来源：csdn

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2568)

062021-9

Vue实现ul中item 删除

前端达人

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todolist</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    {{msg}}
    <div>
        <input v-model="txtValue">
        <button type="button" @click="handleSubmit">提交</button>
        <ul>
            <li v-for="(item,index) of list"
                :key="index"
                :index="index"  @click="deleteItem(index)" //传递下标值 >
                {{item}}
            </li>
        </ul>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello Vue!!',
            txtValue: '',
            list: []
        },
        methods: {
            handleSubmit: function () {
                this.list.push(this.txtValue)
                this.txtValue =''
            },
            deleteItem: function (index) {
                //alert(index)
                this.list.splice(index,1) //通过下标删除 }
        }
    })
</script>
</body>
</html>

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
来源：csdn

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2222)

032021-9

github 22个优秀的React项目

前端达人

React Native :

React :

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
作者：吴博
链接：https://www.jianshu.com/p/2dc805c6c007
来源：简书

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3903)

032021-9

CSS3实现自定义Checkbox和Radiobox

前端达人

我们知道浏览器自带的Checkbox复选框不怎么美观（这或许是我们看习惯了的缘故），而且复选框在不同的浏览器上显示的样式又有很大的差异，由于目前越来越多的人开始接受支持CSS3的现代浏览器，所以今天就简单的用一些CSS3代码来自定义Checkbox的显示方式，个人觉得比浏览器自带的Checkbox美观不少。

下面先来看一下最终实现效果

效果演示地址

效果图如下

下面来分析一下源代码，原理很简单，先把页面上<input type="checkbox" />的display设置为none，从而把它隐藏掉，然后利用CSS3代码来绘制与checkbox邻近的label元素：

HTML代码：

<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label> <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label> <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label> <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>

CSS3代码：

.regular-checkbox + label { background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 3px; display: inline-block; position: relative;
}

下面的CSS代码可以让checkbox选中后出现阴影的效果，主要利用了box-shadow属性：

.regular-checkbox + label:active, .regular-checkbox:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

radiobox的实现也是同样的原理，具体实现方式大家可以在线演示研究，也可以下载源码，非常简单实用。

分类: HTML5/CSS3

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1796)

022021-9

vue.js学习之如何在better-scroll加载完成后，自动滚动到最底部(示例代码)

前端达人

作者：_林冲

简介这篇文章主要介绍了vue.js学习之如何在better-scroll加载完成后，自动滚动到最底部(示例代码)以及相关的经验技巧，文章约1091字，浏览量459，点赞数3，值得参考！

首先我们需要使用scrollTo这个方法：

scrollTo(x, y, time, easing)

参数：

{Number} x 横轴坐标（单位 px）
{Number} y 纵轴坐标（单位 px）
{Number} time 滚动动画执行的时长（单位 ms）
{Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法

为了组件的复用性，我们需要在scroll组件的props添加一个flag，可以监听父元素是否开启滚动到最底部。

scrollToEndFlag: {
        type: Boolean,
        default: false
}

接下来我们在scroll组件的mounted中加入如下代码：

setTimeout(() => {
        this._initScroll()
        console.log(this.scroll.maxScrollY)
        if(this.scrollToEndFlag) {
            this.scroll.scrollTo(0,this.scroll.maxScrollY)
        }
}, 100)

最后在父组件中使用

<scroll :scrollToEndFlag="scrollToEndFlag"> </scroll>

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2664)

022021-9

vue聊天对话框滚动条自动定位到最底部

前端达人

这么写的话只能定位到发送消息前的前一条消息，不能定位到最底部




    

        

            

            

        

        

            
                .then(
            

        

    

    

        

            

            

        

        

            
                this.$nextTick(() => {
            

        

    

    

        

            

            

        

        

            
                let msg = document.getElementById('chatRecord') // 获取对象
            

        

    

    

        

            

            

        

        

            
                msg.scrollTop = msg.scrollHeight // 滚动高度
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                )

解决：写在生命周期updated里面可以完美定位！




    

        

            

            

        

        

            
                updated(){
            

        

    

    

        

            

            

        

        

            
                // 聊天定位到底部
            

        

    

    

        

            

            

        

        

            
                let ele = document.getElementById('chatRecord');
            

        

    

    

        

            

            

        

        

            
                ele.scrollTop = ele.scrollHeight;
            

        

    

    

        

            

            

        

        

            
                },

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3473)

012021-9

Vue开发聊天界面（一）

最近业务里面有个需求就是开发一个类似微信的聊天页面的H5，不需要像微信那么复杂，但是得有个样子，弄了半天之后终于有了个样子。决定写个博客记一下这个过程，希望后续不会鸽

组件拆分

拆了3个，打字的，聊天item，聊天list。大概就这样了

其中聊天list 用了一个better-scroll这个第三方插件。

首先第一步就是开发这个聊天item

聊天item 开发

分析一下需求，别人发过来的和我们发过去的是两个排版和样式，但是不用单独写两个，用个逻辑区分一下就可以了，也可以动态绑定css什么的差别很小。

<template> <div class="record-wrapper"> <!-- 时间，后续开发 --> <div class="time"></div> <!-- 消息， msg通用样式 msg-right/msg-left 区分排版左右 --> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <!-- 消息框， msg通用样式 message-wrapper-right/left 区分聊天框颜色 --> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> </div> </template>

这个是只有1边的，逻辑就是在消息那边加个v-if，判断来源，也可以动态绑定css

弄好以后就这样

<template> <div class="record-wrapper"> <div class="time"></div> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> <div v-else class="msg msg-left"> <div class="img-wrapper"> <img class="img" :src="from2" /> </div> <div class="message-wrapper message-wrapper-left"> <div class="message">{{ message }}</div> </div> </div> </div> </template> <script> export default {
  name: "",
  props: {
    from: Number, // 1: 自己    2: 别人
    message: String,
    timestamp: Date,
  },
  data() {
    return {
      from1: require("../../../assets/imgs/from1.jpg"),
      from2: require("../../../assets/imgs/from2.jpg"),
    };
  },
}; </script>

个人觉得css还是比较重要的，这里用了sass来写。主要解决方案就是用一个display:flex配合上flex-direction: row-reverse让头像和消息左右排列

<style lang="scss" scoped> .record-wrapper { margin: 4px; padding: 4px; } .time { text-align: center; } .msg { display: flex; flex-direction: row; .message-wrapper { max-width: 220px; margin: 0px 10px 0px 10px; .message { margin: 8px; word-wrap: break-word; //英文换行 } } .message-wrapper-left { background-color: lightslategray; border-radius: 0px 12px 12px 12px; } .message-wrapper-right { background-color: powderblue; border-radius: 12px 0px 12px 12px; } .img { flex: auto; height: 36px; width: 36px; border-radius: 8px; } } .msg-right { flex-direction: row-reverse; } .msg-left { flex-direction: row; } </style>

这个是没有调样式的，只是为了自己嗨弄的，可能会很丑。
最后大概就是这样的

Vue开发聊天界面（二）

我开发好了一个聊天的item，可以根据发送方和接收方来分别渲染一个item，这一章我把他们放在一个list的界面里面，让一串item构成一个聊天页面，并且这个聊天页面能够上下滚动。

其实我觉得很简单，难点就2个。首先是滑动，这里用了better-scroll这个组件，可以在网上搜，挺好用的。另一个就是页面布局的问题，写点css还是没得问题的。
首先去better-scroll的官网，按着他的核心逻辑抄一下。不详细谈了，总之来说，会有三层嵌套。我个人命名他们为: wrapper 和content和 item 这三层。
先弄一个json，当做会被填充的数据。

export const chatItems = [ { type:1, message:"fdaf地方撒风大撒风阿斯顿飞fd阿斯顿飞安德森发大水发大水发大水奋斗发的大撒风安德森 发大发大水发", from:1, timestamp: new Date() }, { type:1, message:"fdaf地方撒风大撒aa风阿斯顿飞ffdsafsfadsfadsfjlkjsadflkosdajfl asdjlffsaf水奋斗发的大撒风安德森 发大发大水发", from:1, timestamp: new Date() }, { type:1, message:"做紧d咩嘢?", from:2, timestamp: new Date() }, { type:1, message:"？？？", from:2, timestamp: new Date() }, ]

然后开始写vue的代码

<template> <div class="scroll-wrapper" ref="scroll"> <div class="scroll-content"> <chat-item v-for="item in chatItems" :key="item.message" :type="item.type" :message="item.message" :timestamp="item.timestamp" :from="item.from" ></chat-item> </div> </div> </template> <script> import BScroll from "@better-scroll/core";
import MouseWheel from "@better-scroll/mouse-wheel"
import ChatItem from "./ChatItem";
import { chatItems } from "../../../assets/data/items";

BScroll.use(MouseWheel)

export default {
  name: "",
  data() {
    return {
      chatItems,
      bs: null
    };
  },
  components: {
    "chat-item": ChatItem,
  },

  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.bs.destroy();
  },
  methods: {
    // better-scroll的代码
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        scrollY: true, // 上下滚动
        click: true,   // 开启点击事件
        startY: document.querySelector(".scroll-wrapper").clientHeight - this.$refs.scroll.scrollHeight + 5 , // 初始高度
        mouseWheel: true,   // 鼠标滚动
        probeType: 2, // listening scroll hook
      });

      // 下面的不要也行，官网抄的顺便留下来了
      this.bs.on("scroll", ({ y }) => {
        console.log("scrolling:" + y);
      });
      this.bs.on("scrollEnd", () => {
        console.log("scrollingEnd");
      });
    },
    clickHandler(item) {
      alert(item);
    },
  },
}; </script> <style lang="scss" scoped> .scroll-wrapper {
  height: calc(100% - 160px);  // 留一些空间给 打字的地方 和 header
  overflow: hidden;    // 非常之关键
} </style>

最后是这个样子的了

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：简书。作者：Good_Nine9

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2745)

012021-9

WebSocket 百科

前端达人

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

中文名: WebSocket
外文名: WebSocket

解释: 基于TCP的全双工通信协议
优点: 服务器可以主动传送数据给客户端
功能: 实现了浏览器与服务器全双工通信

背景

语音

很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。

在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

优点

语音

较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，此头部还需要加上额外的4字节的掩码。相对于HTTP请求每次都要携带完整的头部，此项开销显著减少了。
更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。
保持连接状态。与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。
更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。
可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。
更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。

握手协议

语音

WebSocket 是独立的、创建在 TCP 上的协议。

Websocket 通过HTTP/1.1 协议的101状态码进行握手。

为了创建Websocket连接，需要通过浏览器发出请求，之后服务器进行回应，这个过程通常称为“握手”（handshaking）。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1990)

312021-8

VUE 设置定时器和清理定时器

前端达人

使用钩子函数对定时器进行清理，失败了，

1、在data中声明要设置的定时器名称：




    

        

            

            

        

        

            
                data() {
            

        

    

    

        

            

            

        

        

            
                return {
            

        

    

    

        

            

            

        

        

            
                timer: null  // 定时器名称
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                },复制代码

2、在mounted中创建定时器：




    

        

            

            

        

        

            
                this.timer = (() => {
            

        

    

    

        

            

            

        

        

            
                // 某些操作
            

        

    

    

        

            

            

        

        

            
                }, 5000)复制代码

3、在页面注销时清理定时器：




    

        

            

            

        

        

            
                beforeDestroy() {
            

        

    

    

        

            

            

        

        

            
                clearInterval(this.timer);
            

        

    

    

        

            

            

        

        

            
                this.timer = null;
            

        

    

    

        

            

            

        

        

            
                }复制代码

然鹅，并没什么卵用，在切换页面后，定时任务依然顽强的奔跑着。




    

        

            

            

        

        

            
                beforeDestroy() {
            

        

    

    

        

            

            

        

        

            
                clearInterval(this.timer);
            

        

    

    

        

            

            

        

        

            
                this.timer = null;
            

        

    

    

        

            

            

        

        

            
                console.log(this.timer)            //输出为: null,但是任务依然在继续运行
            

        

    

    

        

            

            

        

        

            
                }复制代码

可能是我的姿势不对吧。害羞.jpg

经过在各大论坛一番查找发现：

通过$once这个事件侦听器在定义完定时器之后的位置来清除定时器：




    

        

            

            

        

        

            
                const timer = setInterval(() =>{
            

        

    

    

        

            

            

        

        

            
                // 某些定时器操作
            

        

    

    

        

            

            

        

        

            
                }, 5000);
            

        

    

    

        

            

            

        

        

            
                // 通过$once来监听定时器
            

        

    

    

        

            

            

        

        

            
                // 在beforeDestroy钩子触发时清除定时器
            

        

    

    

        

            

            

        

        

            
                this.$once('hook:beforeDestroy', () => {
            

        

    

    

        

            

            

        

        

            
                clearInterval(timer);
            

        

    

    

        

            

            

        

        

            
                }) 复制代码

哇，成功了...

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2199)

312021-8

如果你使用谷歌浏览器或火狐浏览器，你会发现页面上的textarea元素的右下角有个小三角，用鼠标箭头拖拽它，你的textarea就能随着放大或缩小。这是现代浏览器为方便用户而添加的一个辅助功能(很遗憾，不包括IE，如果你使用IE，是看不到的。)。Web程序员在设计网页时，一般给了textarea一个固定的长宽，通常是配合布局而设定。但挑剔的用户往往会认为太小或太大。有了这个可以调整大小的工具后，用户就可以自己选择合适的大小了。

但是，有时候是应用的需要，Web程序员需要禁止这个可以调整textarea大小的功能(IE完全没这个问题！)，也就是去掉右下角的小三角，有什么办法呢？很简单，使用CSS的resize属性。


    

        

            

                

                

            

            

                
                    <style type="text/css">
                

            

        

        

            

                

                

            

            

                
                    textarea {
                

            

        

        

            

                

                

            

            

                
                    resize: none;
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                
                    </style>

将 resize 属性设置为 none ， textarea 就变成了固定大小，小三角也消失了

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3880)

首页

el-date-picker时间插件获取值格式问题

Vue实现ul中item 删除

github 22个优秀的React项目

CSS3实现自定义Checkbox和Radiobox

vue.js学习之如何在better-scroll加载完成后，自动滚动到最底部(示例代码)

scrollTo(x, y, time, easing)

vue聊天对话框滚动条自动定位到最底部