Vue2.x Todo之自定义指令实现自动聚焦的方法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2.x Todo之自定义指令实现自动聚焦的方法相关的知识，希望对你有一定的参考价值。

参考技术A 我们希望用户双击
todo
进入编辑状态后输入框自动获取焦点，而不是需要先手动点一下。input
元素有一个
focus
方法可以来帮我们完成这个事情，但现在的问题是如何在
Vue
中获得这个
input
元素，从而来操作它。Vue
的自定义指令可以完成这个功能。
我们先来看看
Vue
官网的一个示例：
然而，有的情况下，你仍然需要对普通
DOM
元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：
一个输入框：
当页面加载时，该元素将获得焦点
(注意：
autofocus
在移动版
Safari
上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：
//
注册一个全局自定义指令
`v-focus`
Vue.directive('focus',

//
当被绑定的元素插入到
DOM
中时……
inserted:
function
(el)

//
聚焦元素
el.focus()

)
如果想注册局部指令，组件中也接受一个
directives
的选项：
directives:

focus:

//
指令的定义
inserted:
function
(el)

el.focus()



指令是什么，就是用来指导被绑定的元素的行为，我们之前接触过
v-if、v-model、v-bind
等指令，官方文档说的非常清楚，我们可以自己注册一个指令，然后实现某些钩子函数，从而指定被绑定元素的行为。这里我们依葫芦画瓢，实现一个
focus
指令，这个指令实现了
inserted
钩子函数，这个函数在被绑定的元素被插入
dom
时触发，且被绑定的元素会作为参数传入钩子函数，我们就可以在函数中对它操作。
我们在
Vue
对象中声明局部指令：
<script>
let
id
=
0;
//
用于
id
生成
var
app
=
new
Vue(
...
methods:

...
,
directives:

focus:

inserted:
function
(el)

el.focus()



)
</script>
然后就可以使用这个指令了，把它绑定到编辑框，这样编辑框出现时指令就被触发，从而聚焦。
<input
type="text"
value="编辑
todo..."
v-focus="true"
v-if="editedTodo!==null
&&
editedTodo.id===todo.id"
v-model="todo.title"
@keyup.enter="editDone(todo)"
@keyup.esc="cancelEdit(todo)"/>
注意因为元素一旦出现一定要聚焦的，所以条件始终为
true。
现在用户体验好多了！快打开浏览器体验一下吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue-auto-focus:
控制自动聚焦行为的
vue
指令方法

容器指南之自定义 Confluence 容器镜像

1.简介

Confluence 的安装配置操作步骤繁琐，有很多需要注意的地方。不同版本间的配置都存在差异。利用 Docker 的功能实现配置项目的整合

容器指南之第一个容器      ​https://blog.51cto.com/waringid/5904849​​

容器指南之容器架构及常用指令    ​​https://blog.51cto.com/waringid/5913145​​

容器指南之日常运维   ​​https://blog.51cto.com/waringid/5914178​​

容器指南之自定义LNMP容器镜像 ​​https://blog.51cto.com/waringid/5920404​​

Docker For Windows 安装配置及常用维护   ​​https://blog.51cto.com/waringid/5917666​​

2.创建新镜像

2.1.生成合适的版本

cat > opt/wiki/Dockfile << EOF
FROM atlassian/confluence-server
RUN openssl s_client -connect marketplace.atlassian.com:443 < /dev/null | sed -ne /-BEGIN CERTIFICATE-/,/-END CERTIFICATE-/p > /tmp/marketplace.atlassian.com.crt
RUN keytool -import -trustcacerts -alias proxy_root -file /tmp/marketplace.atlassian.com.crt -keystore $JAVA_HOME/lib/security/cacerts -storepass changeit -noprompt
COPY --chown=confluence:confluence ./deps/mysql-connector-java-5.1.49.jar /opt/atlassian/confluence/confluence/WEB-INF/lib/
COPY --chown=confluence:confluence ./deps/mysql-connector-java-8.0.28.jar /opt/atlassian/confluence/confluence/WEB-INF/lib/
COPY ./deps/atlassian-agent.jar /var/atlassian/
RUN chmod +x /var/atlassian/atlassian-agent.jar
COPY ./deps/simsun.ttc /usr/local/share/fonts/simsun.ttc
RUN mv /opt/atlassian/confluence/bin/setenv.sh  /tmp
COPY ./deps/setenv.sh /opt/atlassian/confluence/bin/
EOF
docker build -t confluence:7.7 .

2.2.解决时间戳不正确

默认 Confluence 使用的是东一区（零时区）的时间制式，想解决时区问题，需要先在 environment 字段内指定 CATALINA_OPTS 参数内容。也可以把对应的参数整合到 setenv.sh 文件中

environment:
    - CATALINA_OPTS= -Duser.timezone=GMT+08

另外，为了避免容器和宿主机时间不一致，可以将本机的 localtime 挂载到容器中。

volumes:
  - /etc/localtime:/etc/localtime:ro

2.3.解决应用卡顿

之前的完整配置将会使用 Confluence 默认资源运行服务，程序最大使用内存是 1GB，当团队人数和内容多了之后，由于资源不足，会让服务运行变慢，最简单的解决方案就是增加资源。只需要在 environment 字段内声明下面内容即可。

environment:
    - JVM_MINIMUM_MEMORY=4096m
    - JVM_MAXIMUM_MEMORY=8192m

2.4.解决中文文档不能预览

由于默认容器镜像不包含中文字体，当我们想预览一个中文文档的时候，得到的结果会是一堆“口口口”方块。

解决这个问题的第一步是为镜像系统安装中文字体，下载一些中文字体 ( ttf/ttc )，比如宋体、楷体，将文件命名为：simsun.ttf、simkai.ttc，然后保存在 fonts 文件夹中，然后挂载到容器系统中。

environment:
  - CATALINA_OPTS= -Duser.timezone=GMT+08 -Dconfluence.document.conversion.fontpath=/usr/local/share/fonts/

2.5.解决应用市场不能访问

keytool -import -trustcacerts -alias proxy_root -file marketplace.atlassian.com.crt -keystore $JAVA_HOME/lib/security/cacerts -storepass changeit -noprompt

3.docker-compose 文件

version: 3
services:

  db:
    image: mysql:8.0.27
    container_name: mysql
    command: --default-authentication-plugin=mysql_native_password
    ports:
      - "3306:3306"
    security_opt:
      - seccomp:unconfined
    environment:
      MYSQL_ROOT_PASSWORD: www.myj123.com
    volumes:
      - /opt/confluence/mysql/backup:/backups
      - /opt/confluence/mysql/mysql-files:/var/lib/mysql-files
      - /opt/confluence/mysql/data:/var/lib/mysql
      - /opt/confluence/mysql/conf/my.cnf:/etc/mysql/my.cnf
    networks:
      lnmp-net:
        ipv4_address: 172.18.0.3


  wiki:
    image: confluence:7.7
    container_name: confluence
    ports:
      - "80:8090"
      - "8091:8091"
    environment:
      - JVM_RESERVED_CODE_CACHE_SIZE=512m
    volumes:
      - /opt/confluence/data:/var/atlassian/application-data/confluence
      - /etc/localtime:/etc/localtime:ro

    networks:
      lnmp-net:
        ipv4_address: 172.18.0.2
    depends_on:
      - db

networks:
  lnmp-net:
    ipam:
      config:
        - subnet: "172.18.0.0/24"

4.生成序列号

docker exec wiki1 java -jar /opt/atlassian/confluence/atlassian-agent.jar \\
    -p conf  -d \\
    -m a@b.com \\
    -n name \\
    -o http://127.0.0.1:8090 \\
    -s BBPJ-TRXY-8MVX-2LDO # 替换为页面上显示的server id

docker exec wiki1 java -jar /opt/atlassian/confluence/atlassian-agent.jar \\
    -p com.mxgraph.confluence.plugins.diagramly \\
    -d -m a@b.com \\
    -n name \\
    -o http://127.0.0.1:8090 \\
    -s BBPJ-TRXY-8MVX-2LDO # 替换为页面上显示的server id

容器指南之自定义

容器指南之自定义

以上是关于Vue2.x Todo之自定义指令实现自动聚焦的方法的主要内容，如果未能解决你的问题，请参考以下文章

uniapp实现自动聚焦

vue2.x与vue3.x中自定义指令详解

VUE之自定义指令

Vue之自定义指令

vue之自定义指令directive

Vue之自定义按键及指令