uguisu-an’s gists

uguisu-an / HelloWorld.vue

Created July 6, 2019 00:08

右クリック以外で閉じるコンテキストメニュー。右クリックの時は改めてその位置のコンテキストメニューを開き直す。

	<template>
	<div class="bg-light" style="height: 300px;">
	<button @contextmenu.prevent="contextmenu">hi</button>
	<button @contextmenu.prevent="contextmenu">bye</button>
	<div v-if="show" class="contextmenu" @contextmenu.stop.prevent="recontextmenu" @click="show = false">
	<div class="modal-dialog m-0" :style="style">
	<div class="modal-content">
	{{ text }}
	</div>
	</div>

uguisu-an / rect.spec.ts

Last active June 30, 2019 09:23

バウンディングボックスを操作するためのクラス

	import Rect from "./rect";

	const rect = new Rect({ x: 100, y: 200, width: 300, height: 400 });

	describe("Rect", () => {
	describe("Left Top", () => {
	it("左上に動かしたら拡大する", () => {
	const b = rect.moveLeftTop({ x: 50, y: 50 });
	expect(b).toEqual({ x: 50, y: 50, width: 350, height: 550 });
	});

uguisu-an / toggle-print-size.html

Created June 26, 2019 17:12

動的に@pageを書き換える例

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style id="style-main"></style>
	<title>Document</title>
	</head>
	<body>

uguisu-an / is-equal.js

Created June 26, 2019 11:34

isEqualの例

 const _ = require("lodash");
 const a = [1, 2, 3];
 console.info([...a] == [...a]); //=> false
 console.info(_.isEqual([...a], [...a])); //=> true
 const o = {
   id: 1,
   name: "John Doe"

uguisu-an / set.js

Created June 26, 2019 11:31

集合同士の処理例

uguisu-an / ChartBar.vue

Created June 21, 2019 00:04

vue: 簡単なガントチャートの実装

	<template>
	<div class="chart-bar" :style="gridColumn">
	<div class="chart-bar-bar" :style="{ background: color }" />
	<slot></slot>
	</div>
	</template>

	<script lang="ts">
	import { Prop, Component, Vue } from "vue-property-decorator";

uguisu-an / client.js

Created June 18, 2019 20:19

POST application/json or application/x-www-form-urlencoded, multipart/form-data with axios and expressjs

	import axios from "axios";

	// application/json
	axios.post("http://localhost:3000/", {
	a: 1,
	b: "hello",
	c: new Date()
	});

	// application/x-www-form-urlencoded

uguisu-an / VueListInput.vue

Created June 14, 2019 09:42

vue - 文字列の配列のv-model

	<template>
	<div>
	<div v-for="(message, i) in messages" :key="i">
	<input type="text" :value="message" @input="e => input(i, e.target.value)" />
	</div>
	</div>
	</template>

	<script lang="ts">
	import { Prop, Component, Vue } from "vue-property-decorator";

uguisu-an / App.vue

Last active June 14, 2019 08:38

vue - 配列のv-model

	<template>
	<div>
	<pre>{{ tasks }}</pre>
	<v-task-list-input v-model="tasks" />
	</div>
	</template>

	<script lang="ts">
	import { Component, Vue } from "vue-property-decorator";
	import VueTaskListInput from "../components/VueTaskListInput.vue";

uguisu-an / vue.json

Created June 14, 2019 07:21

vue + typescriptの初期化スニペット（Visual Studio Code）

	{
	"Scaffolding typescript": {
	"prefix": "typescript scaffold",
	"body": [
	"<script lang=\"ts\">",
	"import { Prop, Component, Vue } from \"vue-property-decorator\";",
	"",
	"@Component",
	"export default class $TM_FILENAME_BASE extends Vue {",
	" $0",

Ii Masamitsu uguisu-an