codesandbox

在 Vue.js 中制作自定义选择组件 疯狂的技术宅 前端先锋 翻译：疯狂的技术宅 作者：Lane Wagner 来源：hackernoon 正文共：2337 字 预计阅读时间：7 分钟 定制 select 标签的设计非常困难。有时候，如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本，那是不可能的。在本文中，你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件。 Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd HTML 1<template> 2 <div 3 class="custom-select" 4 :tabindex="tabindex" 5 @blur="open = false" 6 > 7 <div 8 class="selected" 9 :class="{open: open}" 10 @click="open = !open" 11 > 12 {{ selected }} 13 </div> 14 <div 15 class="items" 16 :class="{selectHide: !open}" 17 > 18 <div 19 class="item" 20 v-for="(option, i) of options

前言 在 vue2.0 时代，我们经常会有这样的需求，写代码逻辑的时候希望将组件写在某个模板之下，因为这样我们很好的使用组件内部的状态数据，控制组件的展示形态。但是从技术的角度上我们又希望将这段代码移到 DOM 中 Vue app 之外的其他位置。 举个简单的例子，我们在使用 modal 组件的时候，我们将它放在了我们的模板 template 里面，但是由于 modal 组件希望位于页面的最上方，这时候我们将 modal 组件挂载在 body 上面是最好控制的，我们能够很好的通过 zIndex 来控制 modal 的位置，当他嵌套在 templat 里面的时候就不那么容易了。 vue2.0中的实现 vue2.0 中我在写这个组件的时候是通过手动的形式来进行挂载的，我写了一个vue指令来进行这个操作，帮助我将 modal 组件挂载到 body 上面去，专这样也能够很好的通过控制 zIndex 来控制 modal 的展示。 function insert ( el ) { const parent = el.parentNode; if (parent && parent !== document .body) { parent.removeChild(el); document .body.appendChild(el); } } export default ( typeof

https://juejin.im/post/5e71b8976fb9a07c9c6a7453 团队： skFeTeam  本文作者：高扬 介绍 TypeScript 是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。 TypeScript可以解决JavaScript弱类型和没有命名空间，难以模块化的问题，同时也增强了代码的可读性，在团队协作和大型项目中体现出更大的优势。 本文将从“基础用法、高阶用法、模块、react项目实践中的应用”四个方向展开文章，方便大家理解，都会备注列子、codesandbox上的远程代码。 基础用法 1.变量类型 代码示例 src/components/baseVar.tsx TypeScript提供与JavaScript几乎相同的数据类型（ 布尔值boolean，字符串string，数字number，数组[]，元组 ），此外还提供了 枚举enum 类型。 当不确定变量的数据类型或者数据类型会在代码运行过程中变化时，使用 any 来标记这些变量，使它们通过编译阶段的检查。 object 表示原始类型以外的类型，即number,string,boolean,symbol,null,undefined以外的类型。 void 用于表示没有任何类型，通常用于方法没有返回值时

https://juejin.im/post/5e71b8976fb9a07c9c6a7453 团队： skFeTeam  本文作者：高扬 介绍 TypeScript 是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。 TypeScript可以解决JavaScript弱类型和没有命名空间，难以模块化的问题，同时也增强了代码的可读性，在团队协作和大型项目中体现出更大的优势。 本文将从“基础用法、高阶用法、模块、react项目实践中的应用”四个方向展开文章，方便大家理解，都会备注列子、codesandbox上的远程代码。 基础用法 1.变量类型 代码示例 src/components/baseVar.tsx TypeScript提供与JavaScript几乎相同的数据类型（ 布尔值boolean，字符串string，数字number，数组[]，元组 ），此外还提供了 枚举enum 类型。 当不确定变量的数据类型或者数据类型会在代码运行过程中变化时，使用 any 来标记这些变量，使它们通过编译阶段的检查。 object 表示原始类型以外的类型，即number,string,boolean,symbol,null,undefined以外的类型。 void 用于表示没有任何类型，通常用于方法没有返回值时

To query a GraphQL API, all you need to do is send an HTTP request that includes the query operation in the body of the request. In this lesson, we will use the browser’s fetch method to request the total days skied from our GraphQL API. const query = ` query { totalDays } `; console.log( "querying the count" ); fetch( "https://8lq1n313m2.sse.codesandbox.io" , { method: "POST" , headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query }) }) .then(res => res.json()) .then(({ data }) => `totalDays: ${data.totalDays}`) .then(console.log) . catch (console.error); graphql